import { Form, Select } from 'antd'
import { useFormikContext } from 'formik';
import React from 'react'
import { useTranslation } from 'react-i18next';

const SelectField = ({tabKey}: any) => {
  
    const { t } = useTranslation();
  const formik = useFormikContext<any>();
  const Formikname = `Attribute[${tabKey}].type`;
  const FormikValue = formik?.values?.Attribute[tabKey]?.["type"];

  const onChange = (value:any) => {
    formik.setFieldValue(Formikname,value)
    console.log(value);
    console.log(formik?.errors,"errors");


  }
  const Data = [{label: "color",value :"color"},{label: "text",value :"text"},{label: "image",value :"image"}]
  return (
     <div className='ValidationField'>
        <label  className="text w-100">
        {t(`${"type"}`)}
        <Select
          placeholder={t(`${"type"}`)}
            options={Data}
            size="large" 
            className={` w-100`}
            defaultValue={FormikValue}
            allowClear
            onChange={onChange}
          />
        </label>
    
        
      </div>
  )
}

export default React.memo(SelectField);
