// AttributeValueTabs.tsx
import React, { useEffect, useState } from 'react';
import { Col, Label, Row } from 'reactstrap';
import { FormItem } from './Field/FormItem';
import { useFormikContext, FormikValues } from 'formik';
import File from './Field/File';
import { useTranslation } from 'react-i18next';
import { ColorPicker, type ColorPickerProps, type GetProp } from 'antd';

interface AttributeValueTabsProps {
    tabKey: string;
    parentKey: string
}

export const AttributeValueTabs: React.FC<AttributeValueTabsProps> = ({ parentKey, tabKey }) => {
    const { t } = useTranslation();
    const formikContext = useFormikContext<FormikValues>();
    const { values, handleChange,setFieldValue } = formikContext;
    const [valuesChanged, setvaluesChanged] = useState(values?.Attribute[parentKey]?.type)

    const handleFieldChange = (fieldName: string) => (
        e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement> | any
    ) => {
        handleChange(`Attribute.${parentKey}.AttributeValue.${tabKey}.${fieldName}`)(e); // Prepend "AttributeValue"
    };
    const FormikName = (FormikFieldname: any) => values?.Attribute?.[parentKey]?.AttributeValue?.[tabKey]?.[FormikFieldname];

    useEffect(() => {
        setvaluesChanged(values?.Attribute[parentKey]?.type)
    }, [values?.Attribute[parentKey]?.type])



    type Color = GetProp<ColorPickerProps, 'value'>;
    const handelchangeColor = (value: Color, hex: string)=>{
        console.log(hex);
        
        setFieldValue(`Attribute.${parentKey}.AttributeValue.${tabKey}.value_en`,hex)
      }
    return (
        <>
            <h5>{t("Value")} {tabKey}</h5>
            <Row xs={1} sm={1} md={1} lg={2} xl={2}>
                <Col>
                    {valuesChanged !== "color" ?
                        <>
                            <FormItem
                                label={t(`value_en`)}
                                value={FormikName("value_en")}
                                onChange={handleFieldChange('value_en')}
                            />
                            <FormItem
                                label={t(`value_ar`)}
                                value={FormikName("value_ar")}
                                onChange={handleFieldChange('value_ar')}
                            />
                        </>


                        :
                        <div className='ValidationFiledCusom'>
                            {/* <FormItem
                                label={t(`Value`)}
                                value={FormikName("value_en")}
                                onChange={handleFieldChange('value_en')}
                            /> */}
                                  <Label className="tabstext">{t("Value")} </Label>

                            <ColorPicker
                                value={FormikName("value_en")}
                                showText={(color:any) => <span>({color.toHexString()})</span>}
                                onChange={handelchangeColor}
                                className=' '
                                format='hex'
                                size='large'

                            />


                        </div>
                    }



                </Col>
                <Col>
                    {valuesChanged !== "color" ?
                        <>

                            <FormItem
                                label={t(`value_de`)}
                                value={FormikName("value_de")}
                                onChange={handleFieldChange('value_de')}

                            />
                        </>


                        :
                        <>


                        </>
                    }

                    <File parentKey={parentKey} tabKey={tabKey} />

                </Col>



            </Row>
        </>
    );
};
