// AttributeTabs.tsx
import React from 'react';
import { Col, Row } from 'reactstrap';
import { FormItem } from './Field/FormItem';
import { useFormikContext, FormikValues } from 'formik';
import File from './Field/File';
import { useTranslation } from 'react-i18next';
import { TabsContainer } from '../AttributeValueTab/TabsContainer';
import  SelectField  from './Field/Select';

interface AttributeTabsProps {
    tabKey: string;
}

export const AttributeTabs: React.FC<AttributeTabsProps> = ({ tabKey }) => {
    const { t } = useTranslation();
    const formikContext = useFormikContext<FormikValues>();
    const { values, handleChange } = formikContext;

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

    return (
        <>
            <h5>{t("Attribute")} {tabKey}</h5>
            <Row xs={1} sm={1} md={1} lg={2} xl={2}>
                <Col>
                    <FormItem
                        label={t(`name_en`)}
                        value={FormikName("name_en")}
                        onChange={handleFieldChange('name_en')}
                    />
                    <FormItem
                        label={t(`name_ar`)}
                        value={FormikName("name_ar")}
                        onChange={handleFieldChange('name_ar')}
                    />

                
                </Col>
                <Col>
               
                <FormItem
                        label={t(`name_de`)}
                        value={FormikName("name_de")}
                        onChange={handleFieldChange('name_de')}

                    />
                    {/* <FormItem
                        label={t(`type`)}
                        value={FormikName("type")}
                        onChange={handleFieldChange('type')}
                    /> */}
                    <SelectField tabKey={tabKey}/>
                
                </Col>

               
            </Row>
            <div className='mt-3'>
            <TabsContainer parentKey={tabKey} />
            </div>

        </>
    );
};
