// VariableTabs.tsx
import React from 'react';
import { Col, Row } from 'reactstrap';
import { FormItem } from './FormItem';
import { useFormikContext, FormikValues } from 'formik';
import File from './Field/File';
import MaltyFile from './Field/FileImage';
import ObjectField from './Field/Object';
import Atteibute from './Field/Atteibute';

import { useTranslation } from 'react-i18next';
import { useParams } from 'react-router-dom';

interface VariableTabsProps {
    tabKey: string;
}

export const VariableTabs: React.FC<VariableTabsProps> = ({ tabKey }) => {
    const { t } = useTranslation();
    const formikContext = useFormikContext<FormikValues>();
    const { values, handleChange } = formikContext;
    // const {id}= useParams()

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

    return (
        <>
            <h5>{t("variables")} {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')}
                    />

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

                    />
                    {/* <FormItem
                        label={t(`quantity`)}
                        value={FormikName("quantity")}
                        onChange={handleFieldChange('quantity')}
                        type="number"
                    /> */}
                
                    {(values?.category_id && (!values?.variable?.[tabKey]?.id || values?.variable?.[tabKey]?.id == null ) ) &&
                        <Atteibute tabKey={tabKey} />
                    }
                   
                    <ObjectField tabKey={tabKey} />
                </Col>
                <Col>
                    <FormItem
                        label={t(`description_en`)}
                        value={FormikName("description_en")}
                        onChange={handleFieldChange('description_en')}
                         type="textarea"
                    />
                    <FormItem
                        label={t(`description_ar`)}
                        value={FormikName("description_ar")}
                        onChange={handleFieldChange('description_ar')}
                         type="textarea"
                    />
                    <FormItem
                        label={t(`description_de`)}
                        value={FormikName("description_de")}
                        onChange={handleFieldChange('description_de')}
                         type="textarea"
                    />
                    <FormItem
                        label={t(`price`)}
                        value={FormikName("price")}
                        onChange={handleFieldChange('price')}
                        type="number"
                    />
                    <File tabKey={tabKey} />
                    <MaltyFile tabKey={tabKey} />
                </Col>
            </Row>
        </>
    );
};
