import React, { useEffect, useState } from 'react';
import { CloseOutlined } from '@ant-design/icons';
import { Button, Form, Input, Space, Typography } from 'antd';
import { useFormikContext } from 'formik';
import { useTranslation } from 'react-i18next';

const ObjectField = ({ tabKey }: any) => {
    const [form] = Form.useForm();
    const formik = useFormikContext<any>();
    const [FieldItems, setFieldItems] = useState<any>([]);
    const [t] = useTranslation();
    const initialValues = formik?.values?.variable[tabKey]?.info;

    const handleChange = (index: number, fieldKey: string, value: string) => {
        const updatedItems = [...FieldItems];
        updatedItems[index][fieldKey] = value;
        setFieldItems(updatedItems);
        formik.setFieldValue(`variable.${tabKey}.info`, updatedItems);
        console.log(updatedItems,"updatedItems");
        
    };

    useEffect(() => {
        if (initialValues) {
            setFieldItems([...initialValues]);
        } else {
            setFieldItems([{ Description: '', key: '' }]);
        }
    }, [tabKey]); // Update when tabKey or info[tabKey] changes

    const removeItem = (index: number) => {
        const updatedItems = [...FieldItems];
        updatedItems.splice(index, 1);
        setFieldItems(updatedItems);
        formik.setFieldValue(`variable.${tabKey}.info`, updatedItems);
    };

    useEffect(() => {
        // console.log(initialValues);
        console.log(initialValues,"initialValues");
        
    }, [initialValues])

    return (
        <Form
            labelCol={{ span: 6 }}
            wrapperCol={{ span: 18 }}
            form={form}
            name="dynamic_form_complex"
            style={{ width: '100%' }} // Set width to 100%
            autoComplete="off"
        >
                   <Typography.Text strong className='Information'>
                        {t("Information")}
                    </Typography.Text>
            {FieldItems.map((item: any, index: number) => (
                <Space key={index} style={{ marginBottom: 16 }}>
             
                    <Form.Item>
                        <Input
                            placeholder={t("key")}
                            value={item.key}
                            onChange={(e) => handleChange(index, 'key', e.target.value)}
                        />
                    </Form.Item>
                    <Form.Item>
                        <Input
                            placeholder={t("Description")}
                            value={item.Description}
                            onChange={(e) => handleChange(index, 'Description', e.target.value)}
                        />
                    </Form.Item>
                    <CloseOutlined onClick={() => removeItem(index)} />
                </Space>
            ))}
            <Button type="dashed" onClick={() => setFieldItems([...FieldItems, { Description: '', key: '' }])} block>
                {t("+ Add Another Item")}
            </Button>
        </Form>
    );
};

export default ObjectField;
