import React, { useEffect } from 'react'
import { Col, Row } from 'reactstrap';
import ValidationField from '../../../Components/ValidationField/ValidationField';
import { useFormikContext } from 'formik';

import { DatePicker } from 'antd';
import { useTranslation } from 'react-i18next';
import { isEmpty } from '../../../Hooks/isEmpty';
import { useGetCategories } from '../../../api/Categories';
import useFormatToSelect from '../../../Hooks/useFormatToSelect';
import { useGetProduct } from '../../../api/product';

function Form() {
  const { values ,setFieldValue} = useFormikContext<any>();
  const [t] = useTranslation(); // FLAT    coupn not be spacified && flate 
  const coupon_type = [{ lable: "general", value: "general" },{ lable: "specified", value: "specified" }]
  const coupon_type_discount_flat = [{ lable: "general", value: "general" }]

  const discount_type = [{ lable: "percentage", value: "percentage" },{ lable: "flat", value: "flat" }]
  const { data: CategoriesData} = useGetCategories()
  const { data: ProductData } = useGetProduct()

  const SelectCategoriesData = useFormatToSelect(CategoriesData?.categories)
  const SelectProductData = useFormatToSelect(ProductData?.BaseProducts)

  useEffect(() => {

    if (values?.discount_type === 'flat') {
        console.log(values?.coupon_type,"values?.coupon_type");
        
      setFieldValue("coupon_type","general")

    }
  }, [values?.discount_type])

  return (
    <Row xs={1} sm={1} md={1} lg={2} xl={2}>
      <Col>
        <ValidationField name="name" />
        <ValidationField name="code" />
        <ValidationField name="active" label='active_from_to' type='DataRange' Format="YYYY/MM/DD" />
        <ValidationField name="maximum_number_of_uses" type='number' />
        <ValidationField name="maximum_number_of_uses_per_user" type='number' />
        <ValidationField name="minimum_total_to_order" type='number' />


      </Col>
      <Col>
        <ValidationField name="coupon_value" type='number' />
        <ValidationField name="discount_type" type="Select" option={discount_type} />
        <ValidationField name="coupon_type" type="Select" option={values?.discount_type !== 'flat' ? coupon_type :coupon_type_discount_flat }  />
        {/* <ValidationField name="itemable_type" label='coupon_item_type' type="Select" option={itemable_type} isDisabled={values?.coupon_type !== "specified"} isMulti/> */}
        <ValidationField name="product_attr" label='product_item' type="Search" option={SelectProductData} searchBy={"name"} isDisabled={values?.coupon_type !== "specified"}isMulti />
        <ValidationField name="category_attr" label='categories_item_name' type="Search" option={SelectCategoriesData} searchBy={"name"} isDisabled={values?.coupon_type !== "specified"}isMulti />
        <ValidationField name="status" type='Checkbox' label='status' />


      </Col>



    </Row>
  )
}

export default Form