import React from 'react';
import { Col, Row, Button } from 'reactstrap';
import { useFormikContext, FieldArray } from 'formik';
import ValidationField from '../../Components/ValidationField/ValidationField';
import { useTranslation } from 'react-i18next';
import { useGetCategory } from '../../api/category';
import { objectToKeyValueArray } from '../../utils/ConvertObjToArr';

interface Param {
  key: string;
  value: string;
}

interface FormValues {
  attachments: any;
  name: string;
  description: string;
  model: string;
  image: string;
  params: Param[];
}

function FormProduct() {
  const formik = useFormikContext<FormValues>();
  const { t } = useTranslation();
  const { data } = useGetCategory();

  const CategoryOption = data?.data?.map((e: any) => ({
    value: e.id,
    label: e?.name,
  }));
  // console.log(formik.values.params);
  const paramsArray  = objectToKeyValueArray(formik.values.params)
  // console.log(formik.values.params);
  
  return (
    <>
    <Row xs={1} sm={1} md={1} lg={2} xl={2}>
      <Col>
        <ValidationField name="name" type="text" label="Name" placeholder="placeholder" />
        <ValidationField name="description" type="text" label="description" placeholder="placeholder" />
        <ValidationField name="model" type="text" label="Model" placeholder="placeholder" />
        <ValidationField name="file" type="File" label="Image" placeholder="placeholder" />
        <ValidationField name="category_id" type="Select" label="Category" option={CategoryOption} placeholder="placeholder" />
      </Col>
      <Col>
        <FieldArray name="params">
          {({ push, remove }) => (
            <div>
              {Array.isArray(formik.values.params) && formik.values.params.map((param, index) => (
                <div key={index}>
                  <ValidationField 
                    name={`params.${index}.key`}
                    type="text" 
                    label={`Param Key ${index + 1}`} 
                    placeholder="Key"
                  />
                  <ValidationField 
                    name={`params.${index}.value`}
                    type="text" 
                    label={`Param Value ${index + 1}`} 
                    placeholder="Value"
                  />
                  <Button type="button" className='remove_button' color='danger' onClick={() => remove(index)}>{t("Remove")}</Button>
                </div>
              ))}
              <Button 
                type="button" 
                className="add_button" 
                color='primary' 
                onClick={() => push({ key: '', value: '' })}
              >
                {t("Add Param")}
              </Button>
            </div>
          )}
        </FieldArray>
      </Col>
    </Row>
    <Row>
      {/* collection */}
    <Col className='border'>
      {/* <FieldArray name="">
        {({ push, remove }) => (
          <div>
            {formik.values.params.map((param, index) => (
              <div key={index}>
                <ValidationField 
                  name={`params.${index}.key`} 
                  type="text" 
                  label={`Param Key ${index + 1}`} 
                  placeholder="Key"
                />
                <ValidationField 
                  name={`params.${index}.value`} 
                  type="text" 
                  label={`Param Value ${index + 1}`} 
                  placeholder="Value"
                />
                <Button type="button" className='remove_button' color='danger' onClick={() => remove(index)}>{t("Remove")}</Button>
              </div>
            ))}
            <Button type="button" className="add_button" color='primary' onClick={() => push({ key: '', value: '' })}>{t("Add Param")}</Button>
          </div>
        )}
      </FieldArray> */}


      {/*  attachements array */}
      <FieldArray name="attachments">
  {({ push, remove }) => (
    <div>
      {formik.values.attachments.map((attachment: any, index: number) => (
        <div key={index}>
          {/* <ValidationField
            name={`attachments[${index}].id`}
            type="text"
            label={`Attachment ID ${index + 1}`}
            placeholder="Attachment ID"
          /> */}
          <ValidationField
            name={`attachments[${index}].attachment`}
            type="File"
            label={`Attachment URL ${index + 1}`}
            placeholder="Attachment URL"
          />
          <Button type="button" className='remove_button' color='danger' onClick={() => remove(index)}>{t("Remove")}</Button>
        </div>
      ))}
      <Button type="button" className="add_button" color='primary' onClick={() => push({ id: null, attachment: '' })}>{t("Add Attachment")}</Button>
    </div>
  )}
</FieldArray>
        </Col>
      </Row>
    </>
  );
}

export default FormProduct;