// AttributeValueTabs.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';

interface AttributeValueTabsProps {
    tabKey: string;
    parentKey:string
}

export const AttributeValueTabs: React.FC<AttributeValueTabsProps> = ({ parentKey,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.${parentKey}.AttributeValue.${tabKey}.${fieldName}`)(e); // Prepend "AttributeValue"
    };
    const FormikName = (FormikFieldname: any) => values?.Attribute?.[parentKey]?.AttributeValue?.[tabKey]?.[FormikFieldname];
   
        

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

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

                
               
            </Row>
        </>
    );
};
