import React, { useEffect, useState } from "react";
import "primereact/resources/primereact.css";
import "primereact/resources/themes/saga-blue/theme.css";
import { MultiSelect } from "primereact/multiselect";

export default function MultiSelectInputFields(props: any) {
  const [selectedEmails, setSelectedEmails] = useState<any>(null);

  useEffect(() => {
    if (props.defaultSelected) {
      let finalSelectedEmail: any = [];
      if (props?.carrierInfo?.additional_emails?.length > 0) {
        props?.carrierInfo?.additional_emails.map((item: any, key: any) => {
          finalSelectedEmail.push(
            item?.email + "_" + item.id + "_additionalEmails",
          );
        });
      }
      if (props?.carrierInfo?.email) {
        finalSelectedEmail.push(
          props?.carrierInfo?.email +
            "_" +
            props?.carrierInfo +
            "_primaryEmails",
        );
      }
      setSelectedEmails(finalSelectedEmail);
    }
  }, [props.defaultSelected]);

  const addtionalEmailsVal = () => {
    if (props?.carrierInfo?.additional_emails?.length > 0) {
      return {
        label: "Additional Emails",
        code: "AE",
        items: props.carrierInfo.additional_emails.map((item: any) => ({
          label: item?.email,
          value: item?.email + "_" + item.id + "_additionalEmails",
        })),
      };
    } else {
      return {
        label: "Additional Emails",
        code: "AE",
        items: [],
      };
    }
  };

  const checkEmptyEmailArr = (finalEmailObj: any) => {
    let primaryEmailObj = finalEmailObj[0];
    let additionalEmailsObj = finalEmailObj[1];
    if (
      primaryEmailObj?.items?.length > 0 &&
      additionalEmailsObj?.items?.length > 0
    ) {
      return finalEmailObj;
    } else if (primaryEmailObj?.items?.length > 0) {
      return [primaryEmailObj];
    } else if (additionalEmailsObj?.items?.length > 0) {
      return [additionalEmailsObj];
    } else {
      return [];
    }
  };

  const groupedEmailsVal = () => {
    let carrierEmail: any = [];
    if (props?.carrierInfo?.email) {
      carrierEmail = {
        label: "Primary Email",
        code: "PE",
        items: [
          {
            label: props?.carrierInfo?.email,
            value:
              props?.carrierInfo?.email +
              "_" +
              props?.carrierInfo +
              "_primaryEmails",
          },
        ],
      };
    } else {
      carrierEmail = {
        label: "Primary Email",
        code: "PE",
        items: [],
      };
    }
    const makePrimaryEmailObj: any = [carrierEmail, addtionalEmailsVal()];
    return checkEmptyEmailArr(makePrimaryEmailObj);
  };

  const groupedEmails: any = groupedEmailsVal();

  const groupedItemTemplate = (option: any) => {
    return (
      <div className="flex align-items-center">
        <div>{option.label}</div>
      </div>
    );
  };

  const handleGroupDropdownList = (e: any) => {
    props.handleChangeDrop(
      props.carrierIndex,
      "email",
      e.value,
      props?.carrierInfo?.carrier_id,
    );
    setSelectedEmails(e.value);
  };

  const panelFooterTemplate = () => {
    const length = selectedEmails ? selectedEmails?.length : 0;

    return (
      <div className="py-2 px-3">
        <b>{length}</b> item{length > 1 ? "s" : ""} selected.
      </div>
    );
  };

  useEffect(() => {
    let finalSelectedEmail: any = [];
    if (props?.carrierInfo?.additional_emails?.length > 0) {
      props?.carrierInfo?.additional_emails.map((item: any, key: any) => {
        if (item.is_send > 0) {
          finalSelectedEmail.push(
            item?.email + "_" + item.id + "_additionalEmails",
          );
        }
      });
    }
    if (props?.carrierInfo?.email) {
      finalSelectedEmail.push(
        props?.carrierInfo?.email + "_" + props?.carrierInfo + "_primaryEmails",
      );
    }
    setSelectedEmails(finalSelectedEmail);
  }, [props.carrierInfo]);

  return (
    <div className="popup-send-carrier-content">
      <MultiSelect
        value={(groupedEmails?.length > 0) ? selectedEmails : []}
        options={groupedEmails}
        onChange={(e) => handleGroupDropdownList(e)}
        optionLabel="label"
        optionGroupLabel="label"
        optionGroupChildren="items"
        optionGroupTemplate={groupedItemTemplate}
        placeholder="Select email"
        display="chip"
        className="form-control w-full"
        style={{ padding: "0px" }}
        panelFooterTemplate={panelFooterTemplate}
      />
    </div>
  );
}