'use client';
import { useEffect, useState } from "react";
import {
  Breadcrumb,
  Row,
  Col,
  Card,
  Button,
} from "react-bootstrap";
import { toast } from "react-toastify";
import "react-phone-input-2/lib/style.css";
import { HiMiniChevronUpDown } from "react-icons/hi2";
import { useTranslation } from "react-i18next";
import { useParams } from "next/navigation";
import WebService from "@/Services/WebService";
import CompoLoader from "@/Common/ComponentLoader/CompoLoader";
import PageTitle from "@/Common/PageTitle";
import InsideTableNoData from "@/Common/NoDataFound/insideTableNoData";
import ConfirmationModal from "@/Common/ConfirmationModal/Confirmation";

const ViewNotification = () => {

  const { t } = useTranslation();
  // const dispatch = useDispatch();
  const [compoLoader, setCompoLoader] = useState<boolean>(false);
  const [pageLoader, setPageLoader] = useState<any>(false);
  const [param, SetParam] = useState<any>(null);
  const [showConfirmationModal, setShowConfirmationModal] = useState(false);
  const [getHistory, setHistory] = useState<any[]>([]);
  const [action, setAction] = useState<string>("");
  const [getFormData, setFormData] = useState<any>({
    info: {}
  });

  const { id } = useParams();
  useEffect(() => {
    SetParam(id);
    if (id) {
      getAddEditDetail(id);
    }
  }, [id]);

  const onShowConfirmation = (id: number) => {
    setAction(`admin/notification/${id}/resend`);
    setShowConfirmationModal(true);
  };

  const handleFinalCloseModal = () => {
    setShowConfirmationModal(false);
    setAction("");
  };

  const getAddEditDetail = (id: any) => {
    setCompoLoader(true);
    return WebService.CommonApi({
      method: "GET",
      action: `admin/notifications/${id}/history`,
      body: null,
    })
      .then((res: any) => {
        setFormData((prev: any) => ({
          ...prev,
          info: res?.info,
        }));

        if (res?.list?.length > 0) {
          res?.list?.map((item: any) => {
            setHistory((prev: any) => [...prev, item]);
          });
        }
        setCompoLoader(false);
      })
      .catch((error: any) => {
        toast.error(error.response);
        setCompoLoader(false);
      });
  };


  return (
    <>
      {compoLoader ? (
        <CompoLoader />
      ) : (
        <div className="page-properties pb-3">
          <div className="nb-3">
            <Breadcrumb>
              <Breadcrumb.Item href="/manage-notifications">{t(' Notification')}</Breadcrumb.Item>
              <Breadcrumb.Item active>
                {'View 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={'View Notification'}
                  backArrow={true}
                />
              </div>
            </Col>
          </Row>
          <Card className="card-style mb-lg-4 mb-3">
            <Card.Header>
              <h4 className="card-title text-white">{' Notification Detail'}</h4>
            </Card.Header>
            <Card.Body>
              <Row className="w-100 pt-3">
                <Col lg={6} xs={6} className="mb-3 ">
                  <p className="fw-bold col-6">{'Title'}:</p>
                  <p className="col-6">{getFormData?.info?.title}</p>
                </Col>
                <Col lg={6} xs={6} className="mb-3 ">
                  <p className="fw-bold col-6">{'Description'}:</p>
                  <p className="col-6">{getFormData?.info?.description}</p>
                </Col>

                <Col lg={6} xs={6} className="mb-3 ">
                  <p className="fw-bold col-3">{t('image')}:</p>
                  <p className="col-9"> {getFormData?.info?.image ? <img src={getFormData?.info?.image} style={{ width: "100px", height: "100px" }} className="img-fluid" /> : "N/A"}</p>
                </Col>
              </Row>
            </Card.Body>
          </Card>


          <Card className="card-style mb-lg-4 mb-3">
            <Card.Header>
              <h4 className="card-title text-white">{'Notified User History'}</h4>
            </Card.Header>
            <Card.Body>
              <Row >
                <Col lg={12} xs={12} className="mb-3">
                  <div className="table-style-1 table-responsive table-accounting position-relative">
                    <table className="table">
                      <thead className="">
                        <tr>
                          <th>
                            {'User Name'}
                          </th>
                          <th>
                            {'Phone Number'}
                          </th>
                          <th>
                            {'Sent By'}
                          </th>
                        </tr>
                      </thead>
                      <tbody>
                        {getHistory && getHistory.length > 0 ? (
                          getHistory.map((document: any, index: number) => {
                            return (
                              <tr key={index}>
                                <td className="col-vid">
                                  {" "}
                                  {document?.user?.name}
                                </td>
                                <td className="col-vid">
                                  {" "}
                                  {document?.user?.mobile_number}
                                </td>
                                <td className="col-vid">
                                  {" "}
                                  {document?.added_by ? document?.added_by?.name : "-"}
                                </td>
                              </tr>
                            );
                          })
                        ) : !pageLoader ? (
                          <tr>
                            <td colSpan={8}>
                              <InsideTableNoData />
                            </td>
                          </tr>
                        ) : (
                          ""
                        )}
                      </tbody>
                    </table>
                  </div>
                </Col>
              </Row>
            </Card.Body>
            <Card.Footer>
              <div className="d-flex justify-content-center">
                <Button
                  style={{ width: 130 }}
                  id="save-btn"
                  className="btn btn-brand mx-3"
                  type="submit"
                  onClick={() => {
                    onShowConfirmation(getFormData?.info?.id);
                  }}
                >
                  {t('resend')}
                </Button>
              </div>
            </Card.Footer>
          </Card>
          <ConfirmationModal
            show={showConfirmationModal}
            closeModal={(flag: any) => {
              if (flag) { handleFinalCloseModal() } else { setShowConfirmationModal(false); };
            }}
            action={action}
            msg={`Are you sure you want to resend Notification?`}
          />
        </div>
      )}
    </>
  );
};
export default ViewNotification;