


import { Button, Upload, UploadFile } from 'antd'
import { UploadOutlined } from '@ant-design/icons';
import { useTranslation } from 'react-i18next';
import { useFormikContext } from 'formik';
import { ImageBaseURL } from '../../../../../../api/config';


const FileAttributeaValue = ({ parentKey,tabKey}:any) => {
    const { t } = useTranslation();
  const formik = useFormikContext<any>();
  const name = `Attribute.[${parentKey}].AttributeValue[${tabKey}].${"image"}`;
  const fileObject = formik?.values?.Attribute?.[parentKey]?.AttributeValue?.[tabKey]?.["image"];

  const FormikimageUrl = fileObject ? ImageBaseURL + fileObject :  '';

  const imageUrl = typeof fileObject === "string" ? (FormikimageUrl)?.replace("public", "/storage") : (fileObject instanceof File) ? URL.createObjectURL(fileObject) : "";

  const fileList: UploadFile[] = [

    {
      uid: '-1',
      name: "",
      status: 'done',
      url: imageUrl ,
      thumbUrl: imageUrl ,
    }
  ];
  const FilehandleChange = (value:any) => {
    
    formik.setFieldValue(name, value.file.originFileObj)

  };
  const customRequest = async ({ onSuccess}: any) => {
    onSuccess();
  };
  return (
    <div className="ValidationField">
      <label  className="text">
        {t(`image`)}
      </label>

      <Upload
        listType="picture"
        maxCount={1}
        defaultFileList={[...fileList]}
        onChange={ FilehandleChange}
        customRequest={customRequest}
        className={`w-100`}
        

      >
        <Button className={" w-100"} icon={<UploadOutlined  />}>
          { t("upload_image") }
         
          </Button>
      </Upload>



    </div>
  )
}

export default FileAttributeaValue