componentName=""
needCss=""
needTest=""
yes="Y"
no="N"
ext=""
re="^[0-9]+"

# colors vars

Color_Off='\033[0m' # Text Reset

# Regular Colors
Black='\033[0;30m'  # Black
Red='\033[0;31m'    # Red
Green='\033[0;32m'  # Green
Yellow='\033[0;33m' # Yellow
Blue='\033[0;34m'   # Blue
Purple='\033[0;35m' # Purple
Cyan='\033[0;36m'   # Cyan
White='\033[0;37m'  # White

# Bold
BBlack='\033[1;30m'  # Black
BRed='\033[1;31m'    # Red
BGreen='\033[1;32m'  # Green
BYellow='\033[1;33m' # Yellow
BBlue='\033[1;34m'   # Blue
BPurple='\033[1;35m' # Purple
BCyan='\033[1;36m'   # Cyan
BWhite='\033[1;37m'  # White

# Underline
UBlack='\033[4;30m'  # Black
URed='\033[4;31m'    # Red
UGreen='\033[4;32m'  # Green
UYellow='\033[4;33m' # Yellow
UBlue='\033[4;34m'   # Blue
UPurple='\033[4;35m' # Purple
UCyan='\033[4;36m'   # Cyan
UWhite='\033[4;37m'  # White

# Background
On_Black='\033[40m'  # Black
On_Red='\033[41m'    # Red
On_Green='\033[42m'  # Green
On_Yellow='\033[43m' # Yellow
On_Blue='\033[44m'   # Blue
On_Purple='\033[45m' # Purple
On_Cyan='\033[46m'   # Cyan
On_White='\033[47m'  # White

# High Intensity
IBlack='\033[0;90m'  # Black
IRed='\033[0;91m'    # Red
IGreen='\033[0;92m'  # Green
IYellow='\033[0;93m' # Yellow
IBlue='\033[0;94m'   # Blue
IPurple='\033[0;95m' # Purple
ICyan='\033[0;96m'   # Cyan
IWhite='\033[0;97m'  # White

# Bold High Intensity
BIBlack='\033[1;90m'  # Black
BIRed='\033[1;91m'    # Red
BIGreen='\033[1;92m'  # Green
BIYellow='\033[1;93m' # Yellow
BIBlue='\033[1;94m'   # Blue
BIPurple='\033[1;95m' # Purple
BICyan='\033[1;96m'   # Cyan
BIWhite='\033[1;97m'  # White

# High Intensity backgrounds
On_IBlack='\033[0;100m'  # Black
On_IRed='\033[0;101m'    # Red
On_IGreen='\033[0;102m'  # Green
On_IYellow='\033[0;103m' # Yellow
On_IBlue='\033[0;104m'   # Blue
On_IPurple='\033[0;105m' # Purple
On_ICyan='\033[0;106m'   # Cyan
On_IWhite='\033[0;107m'  # White

# default component JSX file text

helpFunction() {
    printf "\n${BIBlue}Usage: mkcomp --clean${Color_Off}\n"
    printf "\n${Blue}--clean will help you to remove unwanted files/folders and structure them properly. Everything is automated.${Color_Off}\n"

    printf "\n${BIBlue}Usage: mkcomp --gui${Color_Off}\n"
    printf "\n\t${BIYellow}OR${Color_Off}\n"
    printf "\n${BIBlue}Usage: mkcomp component-name -ct extension${Color_Off}\n\n"
    printf "${Blue}\tcomponent-name = Enter component Name${Color_Off}\n"
    printf "${Blue}\t-c = Do you need a css file?${Color_Off}\n"
    printf "${Blue}\t-t = Do you need a test file?${Color_Off}\n\n"
    printf "${Blue}\textension = -ts/--typescript/-js/--javascript${Color_Off}\n\n"

    printf "\n${BIYellow}mkcomp${Color_Off} ${Yellow}v1.0.0 by dev uditkumar01${Color_Off}\n\n"
    exit 1 # Exit script after printing help
}

createComponent() {

    # component name converted from camel case to hypen string
    componentNameWithHypen="$(echo $componentName | sed 's/\(.\)\([A-Z]\)/\1-\2/g' | tr '[:upper:]' '[:lower:]')"

    # jsx file template with css import
    textJSXWithCss="""import './$componentName.css';
    

export function $componentName() {
    return (
        <div className={'$componentNameWithHypen'}>
        </div>
    );
}

"""
    # jsx file template without css import

    textJSXWithOutCss="""export function $componentName() {
    return (
        <div className={'$componentNameWithHypen'}>
        </div>
    );
}

"""
    # test file template text

    textTest="""import { render, screen } from '@testing-library/react';

test('test message', () => {
  // write your test here
});

"""
    if [ ! -d "src" ]; then
        printf "${BIRed}./src File not found!${Color_Off}\n"
        exit 1
    elif [ ! -d "src/Components" ]; then
        mkdir "src/Components"
        printf "\n${Blue}Made Component folder${Color_Off}\n"
    fi
    if [ -d "src/Components/$componentName" ]; then
        printf "${BIRed}$componentName file already exists!${Color_off}\n"
        exit 1
    elif [ -d "src/Components" ]; then
        mkdir "src/Components/$componentName"
        if [[ $needCss = "Y" ]]; then

            # if css file is imported

            echo """.$componentNameWithHypen {
}""" >"src/Components/$componentName/$componentName.css"

            echo "$textJSXWithCss" >"src/Components/$componentName/$componentName.${ext}x"

        else

            # if css file is not imported

            echo "$textJSXWithOutCss" >"src/Components/$componentName/$componentName.${ext}x"

        fi

        if [[ $needTest = "Y" ]]; then

            # if test file is needed

            echo "$textTest" >"src/Components/$componentName/$componentName.test.${ext}"
        fi

        # editing index file

        if ! [ -f "src/Components/index.${ext}" ]; then
            touch "src/Components/index.${ext}"
        fi

        indexExportsText=$(cat "src/Components/index.${ext}")

        indexExportsText=${indexExportsText##*( )}

        if ! [ -z "$indexExportsText" ]; then
            indexExportsText+="""
export { $componentName } from './$componentName/$componentName';"""
        else
            indexExportsText+="""export { $componentName } from './$componentName/$componentName';"""
        fi

        indexExportsText=${indexExportsText##*( )}

        echo "$indexExportsText" >"src/Components/index.${ext}"

        # ending the process
        printf "\n${BIYellow}$componentName component template ready!!!${Color_Off}\n\n"

        echo -ne "${BIPurple}###########                     (33%)${Color_Off}\r"
        sleep 1
        echo -ne "${BIWhite}###################             (66%)${Color_Off}\r"
        sleep 1
        echo -ne "${BIGreen}#############################   (100%)${Color_Off}\r"
        echo -ne '\n\n'

        tree "src/Components/$componentName"
        printf "\n${BIYellow}Developed by uditkumar01${Color_Off}\n"
        printf "\nRepository link: ${Green}https://github.com/uditkumar01/makeComponent.git${Color_Off}\n\n"
    fi

}

# taking user input

if [[ $1 = "--gui" ]]; then

    # gui

    printf "\n${BIBlue}Enter component name${Color_Off}: "
    read componentName

    printf "${BIBlue}Do you want TypeScript template?${Color_Off} Y/n: "
    read ext

    printf "${BIBlue}Do you need css file${Color_Off} Y/n: "
    read needCss

    printf "${BIBlue}Do you need test file${Color_Off} Y/n: "
    read needTest

    # Begin script in case all parameters are correct

    if [ -z "$componentName" ]; then
        printf "\n${BIRed}Error !!! You forgot to enter component name\n\n${Color_Off}"
        helpFunction
        exit 1
    fi

    if [ -z "$needCss" ]; then
        needCss=$yes
    fi

    if [ -z "$needTest" ]; then
        needTest=$yes
    fi

    ext="$(tr '[:lower:]' '[:upper:]' <<<${ext:0:1})${ext:1}"

    if [[ $ext = "N" ]]; then
        ext="js"
    else
        ext="ts"
    fi

    # checking componentName starts with alphabet or not

    if [[ $componentName =~ $re ]]; then

        printf "\n${BIRed}Error!!! Component name shouldn't begin with number or any symbol${Color_Off}\n\n"
        exit 1
    fi

    # checking componentName container only alphanumeric chars

    case $componentName in
    *[^a-zA-Z0-9]*)
        printf "\n${BIRed}Error!!! Component name shouldn't begin with number or any symbol${Color_Off}\n\n"
        exit 1
        ;;
    esac

    # capitalizing first letter

    componentName="$(tr '[:lower:]' '[:upper:]' <<<${componentName:0:1})${componentName:1}"
    needCss="$(tr '[:lower:]' '[:upper:]' <<<${needCss:0:1})${needCss:1}"
    needTest="$(tr '[:lower:]' '[:upper:]' <<<${needTest:0:1})${needTest:1}"

    # create Component
    createComponent

else

    componentName=$1

    if [[ $componentName = "--clean" ]]; then

        rm -rf ./public/favicon.ico ./public/logo192.png ./public/logo512.png ./src/logo.svg

        indexFileText="""<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <link rel='icon' href='%PUBLIC_URL%/favicon.ico' />
        <meta name='viewport' content='width=device-width, initial-scale=1' />
        <meta name='theme-color' content='#000000' />
        <meta
            name='description'
            content='Web site created using create-react-app'
        />
        <link rel='manifest' href='%PUBLIC_URL%/manifest.json' />
        <title>React App</title>
    </head>
    <body>
        <noscript>You need to enable JavaScript to run this app.</noscript>
        <div id='root'></div>
    </body>
</html>
"""
        if [ -f "public/index.html" ]; then
            echo "$indexFileText" >"public/index.html"
        fi

        if [ -f "src/App.jsx" ] || [ -f "src/App.js" ]; then
            rm -rf ./src/App.jsx ./src/App.test.jsx ./src/App.test.js ./src/App.css ./src/App.js
            mkcomp App -ct -js

            # changing text of src/index.js
            if [ -f "src/index.js" ]; then
                indexJsFileTextRead=""

                while IFS= read -r line; do
                    printf ""

                    if [[ "$line" == *"import App from"* ]]; then
                        indexJsFileTextRead+="""import { App } from './Components';
"""
                    else
                        indexJsFileTextRead+="""${line}
"""
                    fi
                done <"src/index.js"

                echo "${indexJsFileTextRead}" >"src/index.js"
            fi
        elif [ -f "src/App.tsx" ]; then
            rm -rf ./src/App.tsx ./src/App.test.tsx ./src/App.test.ts ./src/App.css ./src/App.ts
            mkcomp App -ct -ts

            # changing text of src/index.js

            if [ -f "src/index.tsx" ]; then

                indexTsFileTextRead=""

                while IFS= read -r line; do
                    printf ""

                    if [[ "$line" == *"import App from"* ]]; then

                        indexTsFileTextRead+="""import { App } from './Components/index';
"""
                    else
                        indexTsFileTextRead+="""${line}
"""
                    fi
                done <"src/index.tsx"

                echo "${indexTsFileTextRead}" >"src/index.tsx"
            fi
        fi

        # echo -ne "${BIPurple}###########                     (33%)${Color_Off}\r"
        # sleep 1
        # echo -ne "${BIWhite}###################             (66%)${Color_Off}\r"
        # sleep 1
        # echo -ne "${BIGreen}#############################   (100%)${Color_Off}\r"
        echo -ne ''
        exit 1
    fi

    if [ -z "$componentName" ]; then
        printf "\n${BIRed}Error !!! You forgot to enter component name\n\n${Color_Off}"
        helpFunction
        exit 1
    fi

    # checking componentName starts with alphabet or not

    if [[ $componentName =~ $re ]]; then

        printf "\n${BIRed}Error!!! Component name shouldn't begin with number or any symbol${Color_Off}\n\n"
        exit 1
    fi

    # checking componentName container only alphanumeric chars

    case $componentName in
    *[^a-zA-Z0-9]*)
        printf "\n${BIRed}Error!!! Component name shouldn't begin with number or any symbol${Color_Off}\n\n"
        exit 1
        ;;
    esac

    if !([[ $2 = "-tc" ]] || [[ $2 = "-ct" ]] || [[ $2 = "-t" ]] || [[ $2 = "-c" ]] || [[ $2 = "-ts" ]] || [[ $2 = "--typescript" ]] || [[ $2 = "-js" ]] || [[ $2 = "--javascript" ]] || [[ -z $2 ]]); then

        printf "\n${BIRed}Error!!! Undefined Symbol${Color_Off}\n\n"
        helpFunction
        exit 1
    elif !([[ $3 = "-ts" ]] || [[ $3 = "--typescript" ]] || [[ $3 = "-js" ]] || [[ $3 = "--javascript" ]] || [[ -z $3 ]]); then
        printf "\n${BIRed}Error!!! Undefined Symbol 3${Color_Off}\n\n"
        helpFunction
        exit 1
    fi

    if [[ $2 = "-tc" ]] || [[ $2 = "-ct" ]]; then
        needCss=$yes
        needTest=$yes
    elif [[ $2 = "-t" ]]; then
        needCss=$no
        needTest=$yes
    elif [[ $2 = "-c" ]]; then
        needCss=$yes
        needTest=$no
    else
        needCss=$no
        needTest=$no
    fi

    if [[ $3 = "-ts" ]] || [[ $3 = "--typescript" ]]; then
        ext="ts"
    else
        ext="js"
        if [[ $2 = "-ts" ]] || [[ $2 = "--typescript" ]]; then
            ext="ts"
        fi
    fi

    # capitalizing first letter

    componentName="$(tr '[:lower:]' '[:upper:]' <<<${componentName:0:1})${componentName:1}"
    needCss="$(tr '[:lower:]' '[:upper:]' <<<${needCss:0:1})${needCss:1}"
    needTest="$(tr '[:lower:]' '[:upper:]' <<<${needTest:0:1})${needTest:1}"

    # create Component

    createComponent
fi

# made by uditkumar01