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';
import { Collection, Param } from './formUtil';


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

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,
  }));

  return (
    <>
      <Row xs={1} sm={1} md={1} lg={3} xl={3}>
        <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" />
          <ValidationField name="attachments" type="MaltyFile" label="Attachments inputs" placeholder="Attachments" />
        </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"
                    />
                    <div className='flex_between'>
                      <Button type="button" className='remove_button' color='danger' onClick={() => remove(index)}>{t("Remove")}</Button>
                      <Button
                        type="button"
                        className="add_button"
                        color='primary'
                        onClick={() => push({ key: '', value: '' })}
                      >
                        {t("Add Param")}
                      </Button>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </FieldArray>
        </Col>

        {/* collection */}
        <Col>
          <FieldArray name="collections">
            {({ push, remove }) => (
              <div>
                {Array.isArray(formik.values.collections) && formik.values.collections?.map((collection, index) => (
                  <div key={index}>
                    <ValidationField
                      name={`collections.${index}.name`}
                      type="text"
                      label={`Collection Name ${index + 1}`}
                      placeholder="Collection Name"
                    />
                    <FieldArray name={`collections.${index}.collectionParams`}>
                      {({ push: pushParam, remove: removeParam }) => (
                        <div>
                          {Array.isArray(collection?.collectionParams) && collection?.collectionParams?.map((param, paramIndex) => (
                            <div key={paramIndex}>
                              <ValidationField
                                name={`collections.${index}.collectionParams.${paramIndex}.key`}
                                type="text"
                                label={`Param Key ${paramIndex + 1}`}
                                placeholder="Key"
                              />
                              <ValidationField
                                name={`collections.${index}.collectionParams.${paramIndex}.value`}
                                type="text"
                                label={`Param Value ${paramIndex + 1}`}
                                placeholder="Value"
                              />
                              <div className='flex_evenly'>
                                <Button type="button" className='remove_button remove_sub_color' color='danger' onClick={() => removeParam(paramIndex)}>
                                  {t("Remove Param")}
                                </Button>
                                <Button
                                  type="button"
                                  className="add_button add_sub_color"
                                  color='primary'
                                  onClick={() => pushParam({ key: '', value: '' })}
                                >
                                  {t("Add Param")}
                                </Button>
                              </div>
                            </div>
                          ))}
                        </div>
                      )}
                    </FieldArray>
                      <div className='flex_between'>
                        <Button type="button" className='remove_button' color='danger' onClick={() => remove(index)}>
                          {t("Remove Collection")}
                        </Button>
                        <Button
                          type="button"
                          className="add_button"
                          color='primary'
                          onClick={() => push({ name: '', collectionParams: [{ key: '', value: '' }] })}
                        >
                          {t("Add Collection")}
                        </Button>
                      </div>
                  </div>
                ))}
              </div>
            )}
          </FieldArray>
        </Col>
      </Row>
    </>
  )
}



export default FormProduct