import React 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 { useGetCategories } from '../../../api/Categories';
import useFormatToSelect from '../../../Hooks/useFormatToSelect';
import { useGetOneAttribute } from '../../../api/attribute';
import Atteibute from './Atteibute';

function Form() {
  const {values} = useFormikContext<any>();
  const [t] = useTranslation()
  const { data } = useGetCategories()
  const SelectData = useFormatToSelect(data?.categories)
  const {data : AttributeData} = useGetOneAttribute()

  return (
    <Row xs={1} sm={1} md={1} lg={2} xl={2}>

      <Col>
        <ValidationField name="name" />
        <ValidationField name="parent_id" type="Search" option={SelectData} searchBy={"name"} />
      </Col>
      <Col>
        <ValidationField name="photo" type="File" />
        {values?.id &&
          <Atteibute  />
        }

        {/* {
                    AttributeData?.map((item:any)=>{
                        return(
                            <ValidationField 
                            name="attributes"
                            option={item?.data}
    
                            />
                        )
                    })
                } */}

      </Col>

    </Row>
  )
}

export default Form