'use client';
import { useEffect, useState } from "react";
import {
  Breadcrumb,
  Row,
  Col,
  Card,
  Button,
  Form,
} from "react-bootstrap";
import { toast } from "react-toastify";
import { Access, ImagePreview, StoreDropDown, BannerFormData } from '../interface';
import { useTranslation } from "react-i18next";
import Select, { components as defaultComponents, SelectComponentsConfig } from 'react-select';
import makeAnimated from 'react-select/animated';
import { GroupBase } from 'react-select';
import UploadImage from "@/Common/UploadImage";
import CommonFunction from "@/Services/CommonFunction";
import WebService from "@/Services/WebService";
import PageTitle from "@/Common/PageTitle";
import { Label } from "@/Common/Label/Label";

const AddEditNotification = () => {
  const { t } = useTranslation();
  const animatedComponents = makeAnimated();
  const [selected, setSelected] = useState<any>();
  const [getOptions, setOptions] = useState<any[]>();
  const [imageFile, setImageFile] = useState<any>(null);
  const [errFlag, setErrFlag] = useState<boolean>(false);
  const [isImageChanged, setIsImageChanged] = useState(false);
  const [getFormData, setFormData] = useState<any>({
    title: "",
    description: "",
    sent_to: "",
    status: "ACTIVE",
  });
  const sendTo = [
    { label: `${'Send All Users'}`, value: "ALL" },
    { label: `${'Send to Specific Users'}`, value: "SPECIFIC" },
  ];

  useEffect(() => {
    getUsersApi();
  }, [getFormData?.sent_to === "SPECIFIC"]);

  const handleSubmit = () => {
    let Flag = false;

    Flag = CommonFunction.checkFormEmptyFields(getFormData);

    if (selected?.length > 0) {
      let unique = selected.map((item: any) => item.value);
      getFormData['user_id'] = unique.join(",");
    }

    if (getFormData.sent_to === 'SPECIFIC') {
      if ((!getFormData.user_id) || (getFormData.user_id.trim() === '')) {
        Flag = true
      }
    }

    if ((Flag)) {
      setErrFlag(true);
      return;
    } else {
      setErrFlag(false);
      submitDetails(`admin/notifications`, "POST", getFormData);
    }
  };


  const submitDetails = (uri: string, method: string, data: BannerFormData) => {
    WebService.addLoader("save-btn");
    WebService.CommonApi({
      method: method,
      action: uri,
      body: data,
    }).then((res: any) => {
      WebService.removeLoader("save-btn");
      if (res?.status === false) {
        toast.error(res?.message);
      } else {
        toast.success(res?.message);
        if (isImageChanged) {
          handleUploadImage(res.id)
        }
        window.history.back();
      }
    }).catch((error: any) => {
      WebService.removeLoader("save-btn");
      toast.error(error?.response?.data?.message);
    });
  }

  const getUsersApi = () => {
    return WebService.CommonApi({
      method: "GET",
      action: "admin/users-dd",
      body: null,
    })
      .then((res: any) => {
        if (res?.list.length > 0) {
          let userList = res?.list.map((item: any) => {
            return {
              label: item?.name,
              value: item?.id
            }
          });
          setOptions(userList);
        }
        return res?.roles;
      })
      .catch((error: any) => {
        toast.error(error?.response?.data?.message);
      });
  };

  const handleUploadImage = (id: any) => {
    return WebService.uploadAPI({
      action: `admin/upload/notification/${id}/image`,
      _file: imageFile,
      key: "image",
      isShowError: true,
    })
      .then((res: any) => {
      })
      .catch((error: any) => {
        return false;
      });
  };

  return (
    <>
      <div className="page-properties pb-3">
        <div className="nb-3">
          <Breadcrumb>
            <Breadcrumb.Item href="/manage-notifications">{" Notification"}</Breadcrumb.Item>
            <Breadcrumb.Item active>
              {"Add Notification"}
            </Breadcrumb.Item>
          </Breadcrumb>
        </div>
        <Row className=" mb-lg-4 mb-3">
          <Col lg={8} xs={8}>
            <div className="d-flex gap-3 align-items-center">
              <PageTitle
                title={"Add Notification"}
                backArrow={true}
              />
            </div>
          </Col>
        </Row>
        <Card className="card-style mb-lg-4 mb-3">
          <Card.Header>
            <h4 className="card-title text-white">  {"Add Notification"} </h4>
          </Card.Header>
          <Card.Body>
            <Row className="w-100">
              <Col lg={6} xs={12}>
                <Form.Group className="mb-3">
                  <Form.Label className="form-label">
                    {"Title"} {" "} <span className="text-danger">*</span>
                  </Form.Label>
                  <Form.Control type="text" placeholder={"Enter title"} value={getFormData?.title || ""} onChange={(e: any) => {
                    setFormData((prevData: any) => ({
                      ...prevData,
                      title: e.target.value
                    }));
                  }} />
                  {getFormData?.title == "" && errFlag && (
                    <Label title={"Please enter title"} modeError={true} />
                  )}
                </Form.Group>
              </Col>
              <Col lg={6} xs={12} >
                <Form.Group>
                  <Form.Label className="form-label">
                    {"Description"}<span className="text-danger">*</span>
                  </Form.Label>
                  <textarea
                    value={getFormData?.description || ""}
                    className="form-control"
                    placeholder={"write something"}
                    autoComplete="off"
                    rows={3}
                    cols={3}
                    onChange={(e: any) => {
                      setFormData((prevData: any) => ({
                        ...prevData,
                        description: e.target.value
                      }));
                    }}
                  >
                  </textarea>
                  {getFormData?.description == "" && errFlag && (
                    <Label title={'Please enter description'} modeError={true} />
                  )}
                </Form.Group>
              </Col>

              <Col lg={6} xs={6}>
                <Form.Group className="mb-3">
                  <Form.Label className="form-label">
                    {'Sent To'} <span className="text-danger">*</span>
                  </Form.Label>
                  <Form.Select value={getFormData?.sent_to || ""} onChange={(e: any) => {
                    setFormData((prevData: any) => ({
                      ...prevData,
                      sent_to: e.target.value
                    }));
                  }} aria-label="Default select example">
                    <option>Select</option>
                    {sendTo && sendTo.length > 0 && sendTo.map((item: any, index: number) => {
                      return (
                        <option key={index} value={item?.value}>{item?.label}</option>
                      )
                    })}
                  </Form.Select>
                  {getFormData?.sent_to === "" && errFlag && (
                    <Label title={'Please select sent to'} modeError={true} />
                  )}
                </Form.Group>
              </Col>
              {getFormData?.sent_to === "SPECIFIC" && (
                <Col lg={6} xs={6}>
                  <Form.Group className="mb-3">
                    <Form.Label className="form-label">
                      {'Users'} {" "} <span className="text-danger">*</span>
                    </Form.Label>
                    <Select
                      closeMenuOnSelect={false}
                      components={animatedComponents as Partial<SelectComponentsConfig<unknown, true, GroupBase<unknown>>>}
                      isMulti
                      onChange={(e: any) => {
                        setSelected(e);
                        setErrFlag(false);
                      }}
                      options={getOptions || []}
                    />
                    {((getFormData?.user_id == "") || (getFormData?.user_id == undefined)) && errFlag && (
                      <Label title={'Please select user'} modeError={true} />
                    )}

                  </Form.Group>
                </Col>
              )}
              <Col lg={12} >
                <Form.Label className="form-label">
                  {'Upload Image'}
                </Form.Label>
                <UploadImage
                  onChange={(file: any) => {
                    setIsImageChanged(true);
                    setImageFile(file)
                  }}
                  acceptFileType={[".jpg", ".png", ".jpeg"]}
                  acceptedSize={10}
                  preview={true}
                  prviewImage={imageFile}
                />
              </Col>
            </Row>
          </Card.Body>

          <Card.Footer>
            <div className="d-flex justify-content-center">
              <Button
                id="close-password-modal"
                className="btn bg-danger border-0 mx-3 text-white"
                type="button"
                onClick={() => {
                  // navigate.push("-1");
                  window.history.back()
                }}
              >
                {t('Cancel')}
              </Button>
              <Button
                id="save-btn"
                className="btn mx-3 text-white"
                type="submit"
                onClick={handleSubmit}
              >
                {t('Send')}
              </Button>
            </div>
          </Card.Footer>
        </Card>

      </div>
    </>
  );
};
export default AddEditNotification;