tanami-admin-panel/src/Pages/IO_Management/CreateIO.jsx

import React, { useContext, useState } from "react";
import { OPACITY_ON_LOAD } from "../../Layout/animations";
import {
  Box,
  Divider,
  FormControl,
  FormLabel,
  Heading,
  Input,
  Select,
  Textarea,
  Button,
  Text,
  Image,
} from "@chakra-ui/react";
import { useForm, Controller } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";
import { AddIcon, CloseIcon, WarningTwoIcon } from "@chakra-ui/icons";
import { TiWarning } from "react-icons/ti";
import GlobalStateContext from "../../Contexts/GlobalStateContext";
import { useNavigate } from "react-router-dom";
import FormField from "../../Components/FormField";
import { v4 as uuidv4 } from "uuid";

const schema = yup.object().shape({
  ioNameArabic: yup.string().required("Arabic name is required"),
  ioName: yup.string().required("Investment Object name is required"),
  sponserName: yup.string().required("Sponser name is required"),
  destributedAmount: yup
    .number()
    .required("Distributed Amount is required")
    .positive("Must be a positive number"),
  year: yup.string().required("Year is required"),
  tenure: yup
    .number()
    .required("Tenure is required")
    .positive("Must be a positive number"),
  annualReturn: yup
    .number()
    .required("Annual Return is required")
    .positive("Must be a positive number"),
  miniInvest: yup
    .number()
    .required("Minimum Invest is required")
    .positive("Must be a positive number"),
  quaterly: yup.string().required("Quaterly is required"),
  targetClose: yup.date().required("Target close date is required"),
  annualyield: yup
    .number()
    .required("Annual Yield is required")
    .positive("Must be a positive number"),
  banner_image: yup.mixed().required("Profile image is required"),
  // .test(
  //   'fileSize',
  //   'File size is too large',
  //   value => value && value.size <= 10485760 // 10MB
  // )
  // .test(
  //   'fileType',
  //   'Unsupported file format',
  //   value => value && ['image/jpg', 'image/jpeg', 'image/gif', 'image/png'].includes(value.type)
  // ),
  other_image: yup.mixed().required("Profile image is required"),
  // .test(
  //   'fileSize',
  //   'File size is too large',
  //   value => value && value.size <= 10485760 // 10MB
  // )
  // .test(
  //   'fileType',
  //   'Unsupported file format',
  //   value => value && ['image/jpg', 'image/jpeg', 'image/gif', 'image/png'].includes(value.type)
  // ),
});

const startYear = 2024;
const endYear = 2124;
// const years = Array.from({ length: endYear - startYear + 1 }, (_, i) => startYear + i);
const years = Array.from({ length: 2124 - 2024 + 1 }, (_, i) => 2024 + i).map(
  (year) => ({ value: year, label: year })
);

export function debounce(func, delay) {
  let debounceTimer;
  return function (...args) {
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(() => func.apply(this, args), delay);
  };
}
const CreateIO = () => {
  const navigate = useNavigate();
  const { sponser, setSponser } = useContext(GlobalStateContext);
  const [bannerImageData, setBannerImageData] = useState(null);
  const [otherImageData, setOtherImageData] = useState(null);

  const [selectedBannerImageData, setSelectedBannerImageData] = useState(null);
  const [selectedOtherImageData, setSelectedOtherImageData] = useState(null);
  

  const {
    control,
    handleSubmit,
    reset,
    formState: { errors },
  } = useForm({
    resolver: yupResolver(schema),
    // defaultValues: {
    //   destributedAmount: 0,
    //   tenure: 0,
    //   annualReturn: 0,
    //   miniInvest: 0,
    //   annualyield: 0,
    // },
  });

  console.log(errors);

  const onSubmit = (data) => {
    console.log(data);
    navigate("/view-io");
    reset();
  };

  // Extract options for the select input
  const sponserOptions = sponser.map((item) => ({
    value: item.sponserName,
    label: item.sponserName,
  }));

  const handleBannerImageChange = (e) => {
    const file = e.target.files[0];
    setBannerImageData(file);
    if (file) {
      const reader = new FileReader();
      reader.onloadend = () => {
        setSelectedBannerImageData(reader.result);
      };
      reader.readAsDataURL(file);
    }
  };

// Handler for file input
const handleOtherImageChange = (e) => {
  const files = Array.from(e.target.files);
  const newImageData = [...(otherImageData || []), ...files]; // Ensure otherImageData is an array

  setOtherImageData(newImageData);

  const readers = files.map(file => {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onloadend = () => {
        resolve(reader.result);
      };
      reader.onerror = reject;
      reader.readAsDataURL(file);
    });
  });

  Promise.all(readers).then(results => {
    setSelectedOtherImageData([...(selectedOtherImageData || []), ...results]); // Ensure selectedOtherImageData is an array
  }).catch(error => {
    console.error("Error reading files:", error);
  });
};
// Function to remove a specific image
const removeOtherImage = (index) => {
  const newImageData = otherImageData.filter((_, i) => i !== index);
  const newSelectedImageData = selectedOtherImageData.filter((_, i) => i !== index);

  setOtherImageData(newImageData);
  setSelectedOtherImageData(newSelectedImageData);
};
  return (
    <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={14}>
      <form onSubmit={handleSubmit(onSubmit)}>
        <Heading as="h6" size="xs" mt={4}>
          Investment Object Details
        </Heading>
        <Box display={"flex"} gap={0}>
          <Box
            width={"50%"}
            p={5}
            display={"flex"}
            flexDirection={"column"}
            gap={4}
          >
            <FormField
              label="Investment object name"
              name="ioName"
              control={control}
              errors={errors}
              isRequired={true}
            />

            <FormField
              label="Destributed Amount"
              placeHolder={"$00.0"}
              helperText={"Please enter value in $"}
              name="destributedAmount"
              type="number"
              control={control}
              errors={errors}
              isRequired={true}
            />

            <FormField
              label="Year"
              control={control}
              name="year"
              type="select"
              options={years}
              errors={errors}
              isRequired={true}
            />

            <FormField
              label="Sponsers Name"
              control={control}
              name="sponserName"
              type="select"
              options={sponserOptions}
              errors={errors}
              isRequired={true}
            />

            <FormField
              label="Tenure"
              // helperText={"Please enter value in Dollar"}
              name="tenure"
              type="number"
              control={control}
              errors={errors}
              isRequired={true}
            />

            <FormField
              label="Annual return"
              placeHolder={"00.00%"}
              helperText={"Please enter value in percentage"}
              name="annualReturn"
              type="number"
              control={control}
              errors={errors}
              isRequired={true}
            />

            <FormField
              label="Banner image"
              control={control}
              name="banner_image"
              type="fileNormal"
              helperText={"You can select only one image for banner."}
              errors={errors}
              multiple={false}
              handleImageChange={handleBannerImageChange}
              isRequired={true}
              rules={{
                required: "Profile image is required",
              }}
              // register={register}  // Pass register function to FormField
            />

            {selectedBannerImageData && (
              <Box width={"20%"}>
                <Image
                  rounded={"md"}
                  objectFit={"cover"}
                  src={selectedBannerImageData}
                  alt="profile"
                  width={100}
                  height={100}
                />
                <Box
                  w={"100%"}
                  display={"flex"}
                  flexDirection={"column"}
                  position={"relative"}
                >
                  <CloseIcon
                    onClick={() => setSelectedBannerImageData(null)}
                    className="link pointer"
                    p={1}
                    fontSize={"lg"}
                    color={"red"}
                    fontWeight={"500"}
                    rounded={"md"}
                    position={"absolute"}
                    top={1}
                    right={0}
                  />
                  <Text
                    as={"span"}
                    fontSize={"xs"}
                    w={"80%"}
                    fontWeight={"500"}
                    mt={1}
                    isTruncated={true}
                  >
                    {bannerImageData?.name}
                  </Text>
                  <Text as={"span"} fontSize={"xs"} fontStyle={"italic"}>
                    {(bannerImageData?.size / (1024 * 1024)).toFixed(2)} mb
                  </Text>
                </Box>
              </Box>
            )}
          </Box>

          <Box
            width={"50%"}
            p={5}
            display={"flex"}
            flexDirection={"column"}
            gap={4}
          >
            <FormField
              label="Investment object"
              name="ioNameArabic"
              placeHolder={"الرجاء إدخال القيمة"}
              control={control}
              errors={errors}
              isRequired={true}
              arabic={true}
            />

            <FormField
              label="Min Invest"
              placeHolder={"$00.00"}
              helperText={"Please enter value in $"}
              name="miniInvest"
              type="number"
              control={control}
              errors={errors}
              isRequired={true}
            />

            <FormField
              label="Quaterly"
              control={control}
              name="quaterly"
              type="select"
              options={[
                {
                  label: "Q1",
                  value: "Q1",
                },
                {
                  label: "Q2",
                  value: "Q2",
                },
                {
                  label: "Q3",
                  value: "Q3",
                },
                {
                  label: "Q4",
                  value: "Q4",
                },
              ]}
              errors={errors}
              isRequired={true}
            />

            <FormField
              label="Target close"
              name="targetClose"
              type="date"
              control={control}
              errors={errors}
              isRequired={true}
            />

            <FormField
              label="Annual yeild"
              placeHolder={"00.00%"}
              helperText={"Please enter value in percentage"}
              name="annualyield"
              type="number"
              control={control}
              errors={errors}
              isRequired={true}
            />


<FormField
              id="otherImageInput"
              label="Other images"
              control={control}
              name="other_image"
              type="fileNormal"
              multiple={true}
              errors={errors}
              handleImageChange={handleOtherImageChange}
              isRequired={true}
              rules={{
                required: "Profile image is required",
              }}
              // register={register}  // Pass register function to FormField
            />

            {selectedOtherImageData?.length > 0 && (
              <Box width={"100%"} display="flex" flexWrap="wrap" gap={4}>
                {selectedOtherImageData.map((imageData, index) => (
                  <Box key={index} width={"100px"}>
                    <Image
                      rounded={"md"}
                      objectFit={"cover"}
                      src={imageData}
                      alt={`profile-${index}`}
                      width={100}
                      height={100}
                    />
                    <Box
                      display={"flex"}
                      flexDirection={"column"}
                      position={"relative"}
                    >
                      <CloseIcon
                        onClick={() => removeOtherImage(index)}
                        bg={"#fff"}
                        className="link pointer"
                        p={1}
                        fontSize={"lg"}
                        color={"red"}
                        fontWeight={"500"}
                        rounded={"md"}
                        position={"absolute"}
                        bottom={0}
                        right={0}
                      />
                      <Text
                        as={"span"}
                        fontSize={"xs"}
                        fontWeight={"500"}
                        mt={1}
                        isTruncated={true}
                      >
                        {otherImageData[index]?.name}
                      </Text>
                      <Text as={"span"} fontSize={"xs"} fontStyle={"italic"}>
                        {(otherImageData[index]?.size / (1024 * 1024)).toFixed(
                          2
                        )}{" "}
                        mb
                      </Text>
                    </Box>
                  </Box>
                ))}
                {/* <Box  width={"100px"} display={'flex'} alignItems={'center'}> */}
                <AddIcon

      onClick={() => document.getElementById('otherImageInput').click()}
                  rounded={"md"}
                  width={50}
                  height={50}
                  mt={26}
                  p={4}
                  cursor={"pointer"}
                  // rounded={'md'}
                  className="link"
                />
                {/* </Box> */}
              </Box>
            )}

            
          </Box>
        </Box>

        <Box display={"flex"} justifyContent={"flex-end"} p={4}>
          <Button
              size={"sm"}
              width={"50%"}
              rounded={"sm"}
              type="submit"
              colorScheme="green"
              mt={4}
            >
              Submit
            </Button>
        </Box>
      </form>

      {/* <Divider /> */}
    </Box>
  );
};

export default CreateIO;