import {Text} from "@chakra-ui/layout";
import {Button, Checkbox, Grid, GridItem, HStack, Input, Stack} from "@chakra-ui/react";
import React from "react";
import CustomStaticDropDown from "./CustomStaticDropDown";
import DropdownSelect from "../Dropdown/DropdownSelect";
import {Col, Panel} from "../intefaces/interfaces";
import {PhotoUpload} from "./PhotoUpload";
import {convertColTypeToInputType, underScoreToCapitalize} from "../utils/TransformText";
import {snakeCase} from "change-case";
import MultipleSelect from "./MultipleSelect";


interface AddEditFormColProps {
    primaryColor: string;
    secondaryColor: string;
    col: Col[];
    formdata: any;
    setFormData: any;
    onSave: any;
    isSaving: boolean;
    panels: Panel[];
    close: () => void;
    refetch: () => void;
}

function AddEditForm(props: AddEditFormColProps) {
    const {
        isSaving, formdata, setFormData,
        col, panels, onSave
    } = props


    function getFieldData(field: string) {
        return formdata[field]
    }

    function handleChange(value: any, field: string) {
        let formDataTemp = {...formdata};
        formDataTemp[field] = value;
        setFormData(formDataTemp);
    }

    function handleChangeSelect(value: any, field: string) {
        let formDataTemp = {...formdata};
        formDataTemp[field] = value;
        setFormData(formDataTemp);
    }


    function findColFieldByColName(colName: string): Col {
        let cl: any = col.find(c => snakeCase(c.name) == colName);
        return cl;
    }

    function checkForStaticDropDown(tablecolField: any) {
        if (typeof tablecolField?.staticDropDown !== 'undefined' && tablecolField?.staticDropDown) {
            return true
        }
        return false
    }

    function isImage(tablecolField: any) {
        if (tablecolField?.type == 'image' || tablecolField?.type == 'image!') {
            return true
        }
        return false
    }

    return (

        <Stack mt={"-10px"}>
            {panels?.map((panel: Panel, panelIndex: number) => {
                return (<Stack key={panelIndex}>
                    <br/>
                    <Text
                        fontFamily={"Inter"}
                        fontWeight={"700"}
                        fontStyle={"normal"}
                        fontSize={"17px"}
                        lineHeight={"20.57px"}
                        color="#4138C2"
                    >
                        {panel.title}
                    </Text>

                    <Grid
                        px="10%"
                        border="1px"
                        p="2"
                        borderColor="gray.200"
                        templateColumns={`repeat(${panel?.panels.length >= 6 ? 3 : panel?.panels.length}, 1fr)`}
                        gap={6}>
                        {panel?.panels.map((colFieldName: any, colFieldIndex: number) => {
                            let tablecolField: Col = findColFieldByColName(colFieldName);
                            return (
                                <GridItem
                                    key={colFieldIndex} w={"100%"}
                                    colSpan={tablecolField.hasManyRelationship ? panel?.panels.length : 1}>

                                    {(!isImage(tablecolField)) &&
                                    <HStack
                                        fontFamily={"Inter"}
                                        fontWeight={"700"}
                                        fontStyle={"normal"}
                                        fontSize={"13px"}
                                        lineHeight={"18px"}
                                        color="black"
                                        mb={"5px"}><Text>
                                        {underScoreToCapitalize(underScoreToCapitalize(colFieldName))}
                                    </Text>
                                        <Text
                                            hidden={!tablecolField.isRequired}
                                            color="red">*
                                        </Text></HStack>
                                    }

                                    {tablecolField.isForeignKey &&
                                    <DropdownSelect
                                        tableName={tablecolField.tableName}
                                        cols={tablecolField.cols}
                                        placeholder={tablecolField.placeholder}
                                        returnColumn={tablecolField.returnColumn}
                                        displayColumns={tablecolField.displayColumns}
                                        defaultValue={formdata[tablecolField.name]}
                                        OnChange={(val: any) => {
                                            handleChangeSelect(val, tablecolField.name)
                                        }}
                                    />
                                    }
                                    {!tablecolField.isForeignKey && (isImage(tablecolField)) &&
                                    <HStack>
                                        <PhotoUpload
                                            height={"40px"}
                                            color={"black"}
                                            label={underScoreToCapitalize(tablecolField.name)}
                                            onUpload={(file: any) => {
                                                let formDataTemp = {...formdata};
                                                formDataTemp[tablecolField.name] = file;
                                                setFormData(formDataTemp);
                                            }}
                                        />
                                    </HStack>
                                    }

                                    {checkForStaticDropDown(tablecolField) &&
                                    <CustomStaticDropDown
                                        value={getFieldData(tablecolField.name)}
                                        options={tablecolField.staticDropDown}
                                        placeholder={underScoreToCapitalize(tablecolField.name)}

                                        OnChange={(val: any) => {
                                            handleChangeSelect(val, tablecolField.name)
                                        }}
                                    />
                                    }

                                    {(tablecolField.type === "Boolean" || tablecolField.type === "Boolean!") &&
                                    <Checkbox
                                        size='lg'
                                        isChecked={getFieldData(tablecolField.name)}
                                        onChange={(e: any) => {
                                            handleChange(e.target.checked, tablecolField.name)
                                        }}
                                    />
                                    }
                                    {(tablecolField.type === "String" || tablecolField.type === "String!")
                                    && !tablecolField.hasManyRelationship &&
                                    <Input
                                        display={(isImage(tablecolField) || tablecolField.isForeignKey) ? 'none' : 'block'}
                                        type={convertColTypeToInputType(tablecolField.type)}
                                        readOnly={tablecolField.isPrimary}
                                        onChange={(e: any) => {
                                            handleChange(e.target.value, tablecolField.name)
                                        }}
                                        value={getFieldData(tablecolField.name)}

                                        h="38px"
                                        border="1px solid "
                                        borderColor={"#ACABAB"}
                                        borderRadius={"4px"}
                                        placeholder={underScoreToCapitalize(tablecolField.name)}
                                    />
                                    }
                                    {tablecolField.hasManyRelationship &&
                                    <MultipleSelect
                                        tableName={tablecolField.tableName}
                                        cols={tablecolField.cols}
                                        placeholder={tablecolField.placeholder}
                                        returnColumn={tablecolField.returnColumn}
                                        displayColumns={tablecolField.displayColumns}
                                        defaultValues={getFieldData(tablecolField.name)}
                                        OnChange={(val: any) => {
                                            handleChange(val, tablecolField.name)
                                        }}
                                    />

                                    }

                                </GridItem>

                            )
                        })
                        }

                    </Grid>
                </Stack>)
            })}

            <HStack
                justify={"flex-end"}
                spacing="6px">
                <Button
                    onClick={() => {
                        props.close()
                    }}
                    disabled={isSaving}

                    fontWeight="700"
                    fontSize="12px"
                    border="1px"
                    className="interFonts"
                    w="100px"
                    h="30px"
                    alignSelf="flex-end"
                    borderRadius="2.89px"
                    bg={props.secondaryColor}
                    color={props.primaryColor}
                    _hover={{
                        bg: props.primaryColor,
                        color: props.secondaryColor
                    }}
                >
                    Cancel
                </Button>


                <Button
                    isLoading={isSaving}
                    onClick={onSave}
                    fontWeight="700"
                    fontSize="12px"
                    border="1px"
                    className="interFonts"
                    w="110px"
                    h="32px"
                    variant="solid"
                    alignSelf="flex-end"
                    borderRadius="2.89px"
                    bg={props.secondaryColor}
                    color={props.primaryColor}
                    _hover={{
                        bg: props.primaryColor,
                        color: props.secondaryColor
                    }}

                >
                    Save
                </Button>

            </HStack>
        </Stack>

    )
}

export default AddEditForm