import React, { useState, useEffect } from "react";
import { ChevronDown, Edit, MoreVertical, Plus, Trash } from "react-feather";
import {
  Card,
  CardHeader,
  CardTitle,
  Input,
  Label,
  Row,
  Col,
  Button,
  Modal,
  ModalHeader,
  ModalBody,
  ModalFooter,
  UncontrolledDropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem,
} from "reactstrap";
import Select from "react-select";
import DataTable from "react-data-table-component";
import ReactPaginate from "react-paginate";
import { useSnackbar } from "notistack";
import { useDispatch, useSelector } from "react-redux";
import withReactContent from "sweetalert2-react-content";
import { default as SweetAlert } from "sweetalert2";
import { useTranslation } from "react-i18next";
import {
  getEmissionSourcesWithPaginate,
  addEmissionSource,
  updateEmissionSource,
  updateEmissionSourceOfWaste,
  deleteEmissionSource,
} from "../../redux/actions/emissionSources/index";
import {
  getSectors,
  getSectorById,
  getConsuptionUnits,
} from "../../redux/actions/datas";
import Factors from "../../components/emission-source/factors";
import { permissionCheck } from "../../components/permission-check";
import { customFilterForSelect } from "../../utility/Utils";

const Swal = withReactContent(SweetAlert);

const EmissionSource = () => {
  const { t } = useTranslation();

  const initialColumns = [
    {
      name: t("EmissionSources.emissionSourceName"),
      selector: (row) => row.tag,
      sortable: true,
      minWidth: "250px",
    },
    {
      name: t("EmissionSources.subSector"),
      selector: (row) => row.subsector,
      sortable: false,
      minWidth: "250px",
      cell: (row) => <span>{row.subSector?.tag || "-"}</span>,
    },
    {
      name: t("EmissionSources.sector"),
      selector: (row) => row.subsector,
      sortable: false,
      minWidth: "250px",
      cell: (row) => <span>{row.subSector?.sector?.tag || "-"}</span>,
    },
    {
      name: t("EmissionSources.emissionScopes"),
      selector: (row) => row.emissionScope,
      sortable: false,
      minWidth: "250px",
      cell: (row) => (
        <span>
          {row.emissionScope && row.emissionScope != "null"
            ? "Kapsam-" + row.emissionScope
            : "-"}
        </span>
      ),
    },
    {
      name: t("Actions"),
      allowOverflow: false,
      maxWidth: "100px",
      cell: (row) => {
        return (
          <div className="d-flex">
            <UncontrolledDropdown>
              <DropdownToggle className="pl-1" tag="span">
                <MoreVertical size={15} />
              </DropdownToggle>
              <DropdownMenu container={"body"}>
                {permissionCheck("emission_source_update") && (
                  <DropdownItem
                    tag="a"
                    className="w-100"
                    onClick={() => handleEditEmissionSource(row)}
                  >
                    <Edit size={15} />
                    <span className="align-middle ml-50">
                      {t("Cruds.edit")}
                    </span>
                  </DropdownItem>
                )}
                {permissionCheck("emission_source_delete") && (
                  <DropdownItem
                    tag="a"
                    className="w-100"
                    onClick={() => handleDeleteEmissionSource(row)}
                  >
                    <Trash size={15} />
                    <span className="align-middle ml-50">
                      {t("Cruds.delete")}
                    </span>
                  </DropdownItem>
                )}
              </DropdownMenu>
            </UncontrolledDropdown>
          </div>
        );
      },
    },
  ];

  useEffect(() => {
    if (
      !(
        permissionCheck("emission_source_delete") ||
        permissionCheck("emission_source_update")
      )
    ) {
      const updatedColumns = initialColumns.filter(
        (column) => column.name !== ("Aksiyonlar" || "Actions")
      );
      setServerSideColumns(updatedColumns);
    }
  }, []);

  const dispatch = useDispatch();
  const { enqueueSnackbar } = useSnackbar();

  const [currentPage, setCurrentPage] = useState(1);
  const [rowsPerPage, setRowsPerPage] = useState(5);
  const [loading, setLoading] = useState(false);

  const [serverSideColumns, setServerSideColumns] = useState(initialColumns);

  const emissionSourceStore = useSelector((state) => state.emissionSources);
  const datasStore = useSelector((state) => state.datas);
  const [emissionSources, setEmissionSources] = useState([]);
  const [selectedSector, setSelectedSector] = useState(null);
  const [sectorsOptions, setSectorsOptions] = useState([]);
  const [subSectorsOptions, setSubSectorsOptions] = useState([]);
  const [showAddEmissionSourceModal, setShowAddEmissionSourceModal] =
    useState(false);
  const [editingEmissionSourceData, setEditingEmissionSourceData] = useState(
    {}
  );
  const [searchValue, setSearchValue] = useState("");
  const [selectedSectorFilter, setSelectedSectorFilter] = useState("");
  const [showDeletedEmissionSource, setShowDeletedEmissionSource] =
    useState(false);

  useEffect(() => {
    dispatch(
      getEmissionSourcesWithPaginate({
        currentPage,
        rowsPerPage,
        selectedSectorFilter,
        showDeletedEmissionSource,
      })
    );
  }, [
    currentPage,
    rowsPerPage,
    selectedSectorFilter,
    showDeletedEmissionSource,
  ]);

  useEffect(() => {
    dispatch(getSectors());
    dispatch(getConsuptionUnits({ sector: "Atık" }));
  }, []);

  useEffect(() => {
    if (selectedSector != null) dispatch(getSectorById(selectedSector));
  }, [selectedSector]);

  useEffect(() => {
    if (emissionSourceStore?.emissionSourcesWithPaginate?.content) {
      setEmissionSources(
        emissionSourceStore?.emissionSourcesWithPaginate?.content
      );
    }
  }, [emissionSourceStore.emissionSourcesWithPaginate?.content]);

  useEffect(() => {
    setSectorsOptions(
      datasStore?.sectors.map((sector) => {
        return {
          value: sector?.id,
          label: sector?.tag,
        };
      })
    );
  }, [datasStore?.sectors]);

  useEffect(() => {
    setSubSectorsOptions(
      datasStore?.sector?.subSectors?.map((subSector) => {
        return {
          value: subSector?.id,
          label: subSector?.tag,
        };
      })
    );
  }, [datasStore?.sector]);

  const handleFilter = (e) => {
    setSearchValue(e.target.value);

    if (e.target.value !== "") {
      setEmissionSources(
        emissionSourceStore.emissionSourcesWithPaginate?.content?.filter(
          (source) =>
            source.tag
              .toUpperCase()
              .normalize("NFD")
              .replace(/[\u0300-\u036f]/g, "")
              .includes(
                e.target.value
                  .toUpperCase()
                  .normalize("NFD")
                  .replace(/[\u0300-\u036f]/g, "")
              )
        )
      );
    } else {
      setEmissionSources(
        emissionSourceStore.emissionSourcesWithPaginate?.content
      );
    }
  };

  const handlePagination = (page) => {
    setCurrentPage(page.selected + 1);
    setEmissionSources(emissionSources.emissionSourcesWithPaginate?.content);
  };

  const handlePerPage = (e) => {
    setCurrentPage(1);
    setRowsPerPage(parseInt(e.target.value));
    setEmissionSources(emissionSources.emissionSourcesWithPaginate?.content);
  };

  const CustomPagination = () => {
    const count = Number(
      (
        emissionSourceStore?.emissionSourcesWithPaginate?.pageInfo
          ?.totalElements / rowsPerPage
      ).toFixed(1)
    );
//asdaasdasd
    return (
      <ReactPaginate
        previousLabel={""}
        nextLabel={""}
        breakLabel="..."
        pageCount={count || 1}
        marginPagesDisplayed={2}
        pageRangeDisplayed={2}
        activeClassName="active"
        forcePage={currentPage !== 0 ? currentPage - 1 : 0}
        onPageChange={(page) => handlePagination(page)}
        pageClassName={"page-item"}
        nextLinkClassName={"page-link"}
        nextClassName={"page-item next"}
        previousClassName={"page-item prev"}
        previousLinkClassName={"page-link"}
        pageLinkClassName={"page-link"}
        breakClassName="page-item"
        breakLinkClassName="page-link"
        containerClassName={
          "pagination react-paginate separated-pagination pagination-sm justify-content-end pr-1 mt-1"
        }
      />
    );
  };

  const onAddEmissionSourceButtonPressed = () => {
    setEditingEmissionSourceData({
      emissionSourceConvertUnits: datasStore?.consuptionUnits?.map(
        (consuptionUnit) => {
          return {
            unit: {
              id: consuptionUnit.id,
              tag: consuptionUnit.tag,
            },
            value: "",
          };
        }
      ),
    });
    setShowAddEmissionSourceModal(true);
  };

  function convertToDesiredFormatAndStringify(arr) {
    const cleanedArray = arr
      .filter((item) => item.unit.tag !== "TJ")
      .filter((item) => item.value !== "")
      .map((item) => ({
        unitId: item.unit?.id || "",
        convertValue: item.value || "",
      }));

    return JSON.stringify(cleanedArray).replace(/"([^"]+)":/g, "$1:");
  }

  const onAddEmissionSourceModalButtonPressed = () => {
    setLoading(true);

    if (!editingEmissionSourceData.id) {
      const newEmissionSourceData = {
        tag: editingEmissionSourceData?.tag,
        description: editingEmissionSourceData?.description || "-",
        emissionScope: editingEmissionSourceData?.emissionScope?.value,
        subSector: editingEmissionSourceData?.subSector?.value,
        co2: editingEmissionSourceData?.co2 || 0,
        ch4: editingEmissionSourceData?.ch4 || 0,
        n2o: editingEmissionSourceData?.n2o || 0,
        emissionSourceConvertUnits: convertToDesiredFormatAndStringify(
          editingEmissionSourceData.emissionSourceConvertUnits
        ),
      };

      dispatch(addEmissionSource(newEmissionSourceData))
        .then(() => {
          setLoading(false);
          setSelectedSector(null);
          setShowAddEmissionSourceModal(false);
          enqueueSnackbar(t("Warnings.addedSuccessfully"), {
            variant: "success",
            preventDuplicate: true,
          });
        })
        .catch(() => {
          setLoading(false);
          setShowAddEmissionSourceModal(false);
          enqueueSnackbar(t("Warnings.addedFail"), {
            variant: "error",
            preventDuplicate: true,
          });
        });
    } else {
      const updateEmissionSourceData = {
        id: editingEmissionSourceData.id,
        tag: editingEmissionSourceData?.tag,
        description: editingEmissionSourceData?.description || "-",
        emissionScope: editingEmissionSourceData?.emissionScope?.value,
        subSector: editingEmissionSourceData?.subSector?.value,
        co2: editingEmissionSourceData?.co2 || 0,
        ch4: editingEmissionSourceData?.ch4 || 0,
        n2o: editingEmissionSourceData?.n2o || 0,
        emissionSourceConvertUnits: convertToDesiredFormatAndStringify(
          editingEmissionSourceData.emissionSourceConvertUnits
        ),
        ...editingEmissionSourceData.wasteEmissionSourceSupplement,
      };
      dispatch(
        editingEmissionSourceData?.sector?.label != "Atık"
          ? updateEmissionSource(updateEmissionSourceData)
          : updateEmissionSourceOfWaste(updateEmissionSourceData)
      )
        .then(() => {
          enqueueSnackbar(t("Warnings.updatedSuccessfully"), {
            variant: "success",
          });
          setLoading(false);
          setSelectedSector(null);
          setEditingEmissionSourceData(null);
          setShowAddEmissionSourceModal(false);
        })
        .catch(() => {
          enqueueSnackbar(
            `${updateEmissionSourceData.tag}, ${t("Warnings.updatedFail")}`,
            {
              variant: "error",
            }
          );
          setLoading(false);
        });
    }
  };

  const renderEmissionSourceModal = () => {
    //Atık için Modal
    if (editingEmissionSourceData?.sector?.label === "Atık") {
      return (
        <Modal
          isOpen={showAddEmissionSourceModal}
          toggle={() =>
            setShowAddEmissionSourceModal(!showAddEmissionSourceModal)
          }
          className="modal-dialog-centered"
        >
          <ModalHeader
            toggle={() =>
              setShowAddEmissionSourceModal(!showAddEmissionSourceModal)
            }
          >
            {editingEmissionSourceData?.id
              ? editingEmissionSourceData.tag
              : t("EmissionSources.addEmissionSource")}
          </ModalHeader>
          <ModalBody>
            <div className="mb-2">
              <Label className="form-label" for="emission-source-name">
                {t("EmissionSources.emissionSourceName")}:
              </Label>
              <Input
                type="text"
                id="emission-source-name"
                placeholder=""
                value={editingEmissionSourceData?.tag || ""}
                onChange={(e) =>
                  setEditingEmissionSourceData({
                    ...editingEmissionSourceData,
                    tag: e.target.value,
                  })
                }
              />
            </div>

            <div className="mb-2">
              <Label className="form-label" for="data-sector-select">
                {t("EmissionSources.sector")}:
              </Label>
              <Select
                id="data-sector-select"
                isClearable={false}
                closeMenuOnSelect={true}
                options={sectorsOptions?.filter(
                  (sector) => sector.label === "Atık"
                )}
                className="react-select"
                placeholder=""
                defaultValue={editingEmissionSourceData?.sector}
                onChange={(value) => {
                  setEditingEmissionSourceData({
                    ...editingEmissionSourceData,
                    sector: value,
                  });
                  setSelectedSector(value.value);
                }}
              />
            </div>

            <div className="mb-2">
              <Label className="form-label" for="subSector-select">
                {t("EmissionSources.subSector")}:
              </Label>
              <Select
                id="subSector-select"
                isClearable={false}
                closeMenuOnSelect={true}
                options={subSectorsOptions?.filter(
                  (subSector) => subSector.label != "Katı Atık Bertarafı"
                )}
                className="react-select"
                placeholder=""
                filterOption={customFilterForSelect}
                defaultValue={editingEmissionSourceData?.subSector}
                onChange={(value) => {
                  setEditingEmissionSourceData({
                    ...editingEmissionSourceData,
                    subSector: value,
                  });
                }}
              />
            </div>
            <div className="mb-2">
              <Label className="form-label" for="ConvertUnits">
                {t("EmissionSources.emissionFactors")}:
              </Label>
              {editingEmissionSourceData?.subSector?.label !=
              "Yakma ve Açık Yanma" ? (
                <Row className="m-1">
                  <Col>
                    <Row className="d-flex justify-content-center">
                      {editingEmissionSourceData?.subSector?.label !=
                      "Atık Su Arıtma ve Deşarjı" ? (
                        <Label className="form-label" for="ch4-waste">
                          CH<sub>4</sub> (g CH<sub>4</sub>/kg Atık)
                        </Label>
                      ) : (
                        <Label className="form-label" for="ch4-waste">
                          ( t CH<sub>4</sub> / t Atık)
                        </Label>
                      )}
                    </Row>
                    <Row>
                      <Col>
                        <Label className="form-label" for="dryWeightCH4">
                          Kuru Ağırlık
                        </Label>
                        <Input
                          type="text"
                          id="dryWeightCH4"
                          placeholder=""
                          value={
                            editingEmissionSourceData
                              ?.wasteEmissionSourceSupplement.dampWeightCH4 != 0
                              ? editingEmissionSourceData
                                  ?.wasteEmissionSourceSupplement.dampWeightCH4
                              : editingEmissionSourceData
                                  ?.wasteEmissionSourceSupplement.dryWeightCH4
                          }
                          readOnly={
                            editingEmissionSourceData
                              ?.wasteEmissionSourceSupplement.dampWeightCH4 ===
                              0 &&
                            editingEmissionSourceData
                              ?.wasteEmissionSourceSupplement.dryWeightCH4 === 0
                          }
                          onChange={(e) => {
                            const inputValue = e.target.value;
                            if (
                              /^\d*\.?\d*$/.test(inputValue) ||
                              inputValue === ""
                            ) {
                              setEditingEmissionSourceData({
                                ...editingEmissionSourceData,
                                wasteEmissionSourceSupplement: {
                                  ...editingEmissionSourceData.wasteEmissionSourceSupplement,
                                  dryWeightCH4: inputValue,
                                },
                              });
                            }
                          }}
                        />
                      </Col>
                      {editingEmissionSourceData?.subSector?.label !=
                        "Atık Su Arıtma ve Deşarjı" && (
                        <Col>
                          <Label className="form-label" for="wetWeightCH4">
                            Yaş Ağırlık
                          </Label>
                          <Input
                            type="text"
                            id="wetWeightCH4"
                            placeholder=""
                            value={
                              editingEmissionSourceData
                                ?.wasteEmissionSourceSupplement.wetWeightCH4
                            }
                            readOnly={
                              editingEmissionSourceData
                                ?.wasteEmissionSourceSupplement.wetWeightCH4 ===
                              0
                            }
                            onChange={(e) => {
                              const inputValue = e.target.value;
                              if (
                                /^\d*\.?\d*$/.test(inputValue) ||
                                inputValue === ""
                              ) {
                                setEditingEmissionSourceData({
                                  ...editingEmissionSourceData,
                                  wasteEmissionSourceSupplement: {
                                    ...editingEmissionSourceData.wasteEmissionSourceSupplement,
                                    wetWeightCH4: inputValue,
                                  },
                                });
                              }
                            }}
                          />
                        </Col>
                      )}
                    </Row>
                  </Col>
                  <Col>
                    <Row className="d-flex justify-content-center">
                      {editingEmissionSourceData?.subSector?.label !=
                      "Atık Su Arıtma ve Deşarjı" ? (
                        <Label className="form-label" for="n2o-waste">
                          N<sub>2</sub>O (g N<sub>2</sub>O/kg Atık)
                        </Label>
                      ) : (
                        <Label className="form-label" for="n2o-waste">
                          (kg N<sub>2</sub>O-N/kg-N)
                        </Label>
                      )}
                    </Row>
                    <Row>
                      <Col>
                        <Label className="form-label" for="dryWeightN2O">
                          Kuru Ağırlık
                        </Label>
                        <Input
                          type="text"
                          id="dryWeightN2O"
                          placeholder=""
                          value={
                            editingEmissionSourceData
                              ?.wasteEmissionSourceSupplement.dryWeightN2O
                          }
                          readOnly={
                            editingEmissionSourceData
                              ?.wasteEmissionSourceSupplement.dryWeightN2O === 0
                          }
                          onChange={(e) => {
                            const inputValue = e.target.value;
                            if (
                              /^\d*\.?\d*$/.test(inputValue) ||
                              inputValue === ""
                            ) {
                              setEditingEmissionSourceData({
                                ...editingEmissionSourceData,
                                wasteEmissionSourceSupplement: {
                                  ...editingEmissionSourceData.wasteEmissionSourceSupplement,
                                  dryWeightN2O: inputValue,
                                },
                              });
                            }
                          }}
                        />
                      </Col>
                      {editingEmissionSourceData?.subSector?.label !=
                        "Atık Su Arıtma ve Deşarjı" && (
                        <Col>
                          <Label className="form-label" for="wetWeightN2O">
                            Yaş Ağırlık
                          </Label>
                          <Input
                            type="text"
                            id="wetWeightN2O"
                            placeholder=""
                            value={
                              editingEmissionSourceData
                                ?.wasteEmissionSourceSupplement.wetWeightN2O
                            }
                            readOnly={
                              editingEmissionSourceData
                                ?.wasteEmissionSourceSupplement.wetWeightN2O ===
                              0
                            }
                            onChange={(e) => {
                              const inputValue = e.target.value;
                              if (
                                /^\d*\.?\d*$/.test(inputValue) ||
                                inputValue === ""
                              ) {
                                setEditingEmissionSourceData({
                                  ...editingEmissionSourceData,
                                  wasteEmissionSourceSupplement: {
                                    ...editingEmissionSourceData.wasteEmissionSourceSupplement,
                                    wetWeightN2O: inputValue,
                                  },
                                });
                              }
                            }}
                          />
                        </Col>
                      )}
                    </Row>
                  </Col>
                </Row>
              ) : (
                <Row className="m-1">
                  <div className="d-flex flex-column justify-content-center mb-3">
                    <Label className="form-label text-center mb-1">Yakma</Label>
                    <Row>
                      <Col>
                        <Label className="form-label" for="dryWeightCH4">
                          CH<sub>4</sub>
                          (kg CH<sub>4</sub> / t Atık) <br /> Yaş Ağırlık
                        </Label>
                        <Input
                          type="text"
                          id="dryWeightCH4"
                          placeholder=""
                          value={
                            editingEmissionSourceData
                              ?.wasteEmissionSourceSupplement.dampWeightCH4 != 0
                              ? editingEmissionSourceData
                                  ?.wasteEmissionSourceSupplement.dampWeightCH4
                              : editingEmissionSourceData
                                  ?.wasteEmissionSourceSupplement.dryWeightCH4
                          }
                          readOnly={
                            editingEmissionSourceData
                              ?.wasteEmissionSourceSupplement.dampWeightCH4 ===
                              0 &&
                            editingEmissionSourceData
                              ?.wasteEmissionSourceSupplement.dryWeightCH4 === 0
                          }
                          onChange={(e) => {
                            const inputValue = e.target.value;
                            if (
                              /^\d*\.?\d*$/.test(inputValue) ||
                              inputValue === ""
                            ) {
                              setEditingEmissionSourceData({
                                ...editingEmissionSourceData,
                                wasteEmissionSourceSupplement: {
                                  ...editingEmissionSourceData.wasteEmissionSourceSupplement,
                                  dryWeightCH4:
                                    editingEmissionSourceData
                                      ?.wasteEmissionSourceSupplement
                                      .dryWeightCH4 != 0 && inputValue,
                                  dampWeightCH4:
                                    editingEmissionSourceData
                                      ?.wasteEmissionSourceSupplement
                                      .dampWeightCH4 != 0 && inputValue,
                                },
                              });
                            }
                          }}
                        />
                      </Col>
                      <Col>
                        <Label className="form-label" for="wetWeightN2O">
                          N<sub>2</sub>O (kg N<sub>2</sub>O / t atık) <br /> Yaş
                          Ağırlık
                        </Label>
                        <Input
                          type="text"
                          id="wetWeightN2O"
                          placeholder=""
                          value={
                            editingEmissionSourceData
                              ?.wasteEmissionSourceSupplement.wetWeightN2O
                          }
                          readOnly={
                            editingEmissionSourceData
                              ?.wasteEmissionSourceSupplement.wetWeightN2O === 0
                          }
                          onChange={(e) => {
                            const inputValue = e.target.value;
                            if (
                              /^\d*\.?\d*$/.test(inputValue) ||
                              inputValue === ""
                            ) {
                              setEditingEmissionSourceData({
                                ...editingEmissionSourceData,
                                wasteEmissionSourceSupplement: {
                                  ...editingEmissionSourceData.wasteEmissionSourceSupplement,
                                  wetWeightN2O: inputValue,
                                },
                              });
                            }
                          }}
                        />
                      </Col>
                    </Row>
                  </div>
                  <div className="d-flex flex-column justify-content-center">
                    <Label className="form-label text-center mb-1">
                      Açık Yanma
                    </Label>
                    <Row>
                      <Col>
                        <Label className="form-label" for="wetWeightCH4">
                          CH<sub>4</sub>
                          (kg CH<sub>4</sub> / t Atık) <br /> Yaş Ağırlık
                        </Label>
                        <Input
                          type="text"
                          id="wetWeightCH4"
                          placeholder=""
                          value={
                            editingEmissionSourceData
                              ?.wasteEmissionSourceSupplement.wetWeightCH4
                          }
                          readOnly={
                            editingEmissionSourceData
                              ?.wasteEmissionSourceSupplement.wetWeightCH4 === 0
                          }
                          onChange={(e) => {
                            const inputValue = e.target.value;
                            if (
                              /^\d*\.?\d*$/.test(inputValue) ||
                              inputValue === ""
                            ) {
                              setEditingEmissionSourceData({
                                ...editingEmissionSourceData,
                                wasteEmissionSourceSupplement: {
                                  ...editingEmissionSourceData.wasteEmissionSourceSupplement,
                                  wetWeightCH4: inputValue,
                                },
                              });
                            }
                          }}
                        />
                      </Col>
                      <Col>
                        <Label className="form-label" for="dryWeightN2O">
                          N<sub>2</sub>O (kg N<sub>2</sub>O / t atık) <br />{" "}
                          Kuru Ağırlık
                        </Label>
                        <Input
                          type="text"
                          id="dryWeightN2O"
                          placeholder=""
                          value={
                            editingEmissionSourceData
                              ?.wasteEmissionSourceSupplement.dryWeightN2O
                          }
                          readOnly={
                            editingEmissionSourceData
                              ?.wasteEmissionSourceSupplement.dryWeightN2O === 0
                          }
                          onChange={(e) => {
                            const inputValue = e.target.value;
                            if (
                              /^\d*\.?\d*$/.test(inputValue) ||
                              inputValue === ""
                            ) {
                              setEditingEmissionSourceData({
                                ...editingEmissionSourceData,
                                wasteEmissionSourceSupplement: {
                                  ...editingEmissionSourceData.wasteEmissionSourceSupplement,
                                  dryWeightN2O: inputValue,
                                },
                              });
                            }
                          }}
                        />
                      </Col>
                    </Row>
                  </div>
                </Row>
              )}
            </div>
          </ModalBody>
          <ModalFooter>
            <Button
              disabled={
                !(
                  editingEmissionSourceData?.subSector &&
                  editingEmissionSourceData?.tag &&
                  editingEmissionSourceData?.emissionScope
                )
              }
              color="primary"
              onClick={onAddEmissionSourceModalButtonPressed}
            >
              {loading
                ? t("Cruds.saving")
                : !editingEmissionSourceData?.id
                ? t("Cruds.save")
                : t("Cruds.update")}
            </Button>
          </ModalFooter>
        </Modal>
      );
    }

    //Atık hariç diğer sektörler için Modal
    const convertedUnits = handleConvertUnits(
      editingEmissionSourceData?.emissionSourceConvertUnits
    );

    return (
      <Modal
        isOpen={showAddEmissionSourceModal}
        toggle={() =>
          setShowAddEmissionSourceModal(!showAddEmissionSourceModal)
        }
        className="modal-dialog-centered"
      >
        <ModalHeader
          toggle={() =>
            setShowAddEmissionSourceModal(!showAddEmissionSourceModal)
          }
        >
          {editingEmissionSourceData?.id
            ? editingEmissionSourceData.tag
            : t("EmissionSources.addEmissionSource")}
        </ModalHeader>
        <ModalBody>
          <div className="mb-2">
            <Label className="form-label" for="emission-source-name">
              {t("EmissionSources.emissionSourceName")}:
            </Label>
            <Input
              type="text"
              id="emission-source-name"
              placeholder=""
              value={editingEmissionSourceData?.tag || ""}
              onChange={(e) =>
                setEditingEmissionSourceData({
                  ...editingEmissionSourceData,
                  tag: e.target.value,
                })
              }
            />
          </div>

          <div className="mb-2">
            <Label className="form-label" for="data-sector-select">
              {t("EmissionSources.sector")}:
            </Label>
            <Select
              id="data-sector-select"
              isClearable={false}
              closeMenuOnSelect={true}
              options={sectorsOptions?.filter(
                (sector) => sector.label != "Atık"
              )}
              className="react-select"
              placeholder=""
              defaultValue={editingEmissionSourceData?.sector}
              onChange={(value) => {
                setEditingEmissionSourceData({
                  ...editingEmissionSourceData,
                  sector: value,
                });
                setSelectedSector(value.value);
              }}
            />
          </div>

          <div className="mb-2">
            <Label className="form-label" for="subSector-select">
              {t("EmissionSources.subSector")}:
            </Label>
            <Select
              id="subSector-select"
              isClearable={false}
              closeMenuOnSelect={true}
              options={subSectorsOptions}
              className="react-select"
              placeholder=""
              filterOption={customFilterForSelect}
              defaultValue={editingEmissionSourceData?.subSector}
              onChange={(value) => {
                setEditingEmissionSourceData({
                  ...editingEmissionSourceData,
                  subSector: value,
                });
              }}
            />
          </div>
          <div className="mb-2">
            <Label className="form-label" for="subSector-select">
              {t("EmissionSources.emissionScopes")}:
            </Label>
            <Select
              id="subSector-select"
              isClearable={false}
              closeMenuOnSelect={true}
              options={[
                { value: "1", label: "Kapsam-1" },
                { value: "2", label: "Kapsam-2" },
                { value: "3", label: "Kapsam-3" },
              ]}
              className="react-select"
              placeholder=""
              defaultValue={editingEmissionSourceData?.emissionScope}
              onChange={(value) => {
                setEditingEmissionSourceData({
                  ...editingEmissionSourceData,
                  emissionScope: value,
                });
              }}
            />
          </div>
          <div className="mb-2">
            <Label className="form-label" for="ConvertUnits">
              Dönüştürme Birimleri:
            </Label>
            {convertedUnits?.map((item, index) => {
              return (
                <Row key={item.unit.id} className="m-1">
                  <Input
                    className="w-25"
                    placeholder=""
                    disabled
                    value={item.unit.tag}
                    onChange={() => {
                      return null;
                    }}
                  />
                  <Input
                    className="w-75"
                    type="text"
                    id="convert-value"
                    placeholder=""
                    value={item.unit.tag === "TJ" ? "1" : item.value || ""}
                    readOnly={item.unit.tag === "TJ"}
                    onChange={(e) => {
                      const inputValue = e.target.value;
                      if (/^\d*\.?\d*$/.test(inputValue) || inputValue === "") {
                        const updatedConvertUnits = [...convertedUnits];
                        updatedConvertUnits[index] = {
                          ...item,
                          value: inputValue,
                        };
                        setEditingEmissionSourceData({
                          ...editingEmissionSourceData,
                          emissionSourceConvertUnits: updatedConvertUnits,
                        });
                      }
                    }}
                  />
                </Row>
              );
            })}
          </div>
          <Factors
            editingEmissionSourceData={editingEmissionSourceData}
            setEditingEmissionSourceData={setEditingEmissionSourceData}
          />
          {/* <ConstantEnergy
            editingEmissionSourceData={editingEmissionSourceData}
            setEditingEmissionSourceData={setEditingEmissionSourceData}
          /> */}
        </ModalBody>
        <ModalFooter>
          <Button
            disabled={
              !(
                editingEmissionSourceData?.subSector &&
                editingEmissionSourceData?.tag &&
                editingEmissionSourceData?.emissionScope
              )
            }
            color="primary"
            onClick={onAddEmissionSourceModalButtonPressed}
          >
            {loading
              ? t("Cruds.saving")
              : !editingEmissionSourceData?.id
              ? t("Cruds.save")
              : t("Cruds.update")}
          </Button>
        </ModalFooter>
      </Modal>
    );
  };

  const handleConvertUnits = (emissionSourceConvertUnits) => {
    const existingUnitIds =
      emissionSourceConvertUnits?.map((item) => item.unit.id) || [];
    const missingUnits = datasStore.consuptionUnits.filter(
      (unit) => !existingUnitIds.includes(unit.id)
    );
    const convertUnitsOfSelectedSource = [
      ...(emissionSourceConvertUnits || []),
      ...missingUnits.map((unit) => ({
        unit: { id: unit.id, tag: unit.tag },
        value: "", // You can set the default value for missing units here
      })),
    ];
    return convertUnitsOfSelectedSource;
  };

  const handleEditEmissionSource = (selectedSource) => {
    const sectorOfSelectedSource = {
      value: selectedSource?.subSector?.sector?.id,
      label: selectedSource?.subSector?.sector?.tag,
    };
    const subSectorOfSelectedSource = {
      value: selectedSource?.subSector?.id,
      label: selectedSource?.subSector?.tag,
    };
    const emissionScopeOfSelectedSource = {
      value: selectedSource?.emissionScope,
      label: selectedSource?.emissionScope
        ? "Kapsam-" + selectedSource?.emissionScope
        : "",
    };
    const convertUnitsOfSelectedSource =
      selectedSource?.emissionSourceConvertUnits?.map((item) => ({
        ...item,
        value: item.value.toString(),
      }));

    const wasteEmissionSourceSupplementOfSelectedSource = {
      dryWeightCH4:
        selectedSource?.wasteEmissionSourceSupplement?.dryWeightCH4 || 0,
      wetWeightCH4:
        selectedSource?.wasteEmissionSourceSupplement?.wetWeightCH4 || 0,
      dryWeightN2O:
        selectedSource?.wasteEmissionSourceSupplement?.dryWeightN2O || 0,
      wetWeightN2O:
        selectedSource?.wasteEmissionSourceSupplement?.wetWeightN2O || 0,
      dampWeightCH4:
        selectedSource?.wasteEmissionSourceSupplement?.dampWeightCH4 || 0,
    };
    setSelectedSector(selectedSource?.subSector?.sector?.id);
    setShowAddEmissionSourceModal(true);
    setEditingEmissionSourceData({
      id: selectedSource.id,
      tag: selectedSource?.tag,
      description: selectedSource?.description || "-",
      subSector: selectedSource?.subSector,
      co2: selectedSource?.co2,
      ch4: selectedSource?.ch4,
      n2o: selectedSource?.n2o,
      sector: sectorOfSelectedSource,
      subSector: subSectorOfSelectedSource,
      emissionScope: emissionScopeOfSelectedSource,
      emissionSourceConvertUnits: convertUnitsOfSelectedSource,
      wasteEmissionSourceSupplement:
        wasteEmissionSourceSupplementOfSelectedSource,
    });
  };

  const handleDeleteEmissionSource = async (selectedSource) => {
    const result = await Swal.fire({
      title: `${selectedSource.tag}, ${t("Warnings.sureForDelete")}`,
      text: t("Warnings.notUndone"),
      icon: "warning",
      showCancelButton: true,
      confirmButtonText: t("Cruds.delete"),
      cancelButtonText: t("Cruds.cancel"),
      customClass: {
        confirmButton: "btn btn-primary",
        cancelButton: "btn btn-danger ml-1",
      },
      buttonsStyling: false,
    });
    if (result.value !== null && result.value === true) {
      dispatch(deleteEmissionSource(selectedSource.id));
    }
  };

  return (
    <div style={{ marginTop: "2%" }}>
      <Card>
        <CardHeader className="border-bottom">
          <CardTitle tag="h4">{t("EmissionSources.emissionSources")}</CardTitle>
          {permissionCheck("emission_source_create") && (
            <Button
              className="ml-2"
              color="primary"
              onClick={onAddEmissionSourceButtonPressed}
            >
              <Plus size={15} />
              <span className="align-middle ml-50">
                {t("EmissionSources.addEmissionSource")}
              </span>
            </Button>
          )}
        </CardHeader>
        <Row className="mx-0 mt-1 mb-50">
          <Col sm="6" md="2">
            <div className="d-flex align-items-center">
              <Label for="sort-select">{t("Show")}</Label>
              <Input
                className="ml-1 dataTable-select"
                type="select"
                id="sort-select"
                value={rowsPerPage}
                onChange={(e) => handlePerPage(e)}
              >
                <option value={5}>5</option>
                <option value={10}>10</option>
                <option value={25}>25</option>
                <option value={50}>50</option>
                <option value={75}>75</option>
                <option value={100}>100</option>
              </Input>
            </div>
          </Col>
          <Col sm="6" md="3" className="mt-1">
            {permissionCheck("deleted_items") && (
              <div className="ml-4">
                <Input
                  className="dataTable-select"
                  id="deleted-checkbox"
                  type="checkbox"
                  checked={showDeletedEmissionSource}
                  onChange={(e) => {
                    setShowDeletedEmissionSource(e.target.checked);
                    setCurrentPage(1);
                  }}
                />
                <Label for="deleted-checkbox">
                  {t("EmissionSources.showDeletedEmissionSource")}
                </Label>
              </div>
            )}
          </Col>
          <Col
            className="d-flex align-items-center justify-content-end mt-sm-0 mt-1 ml-md-auto"
            sm="6"
            md="4"
          >
            <Input
              className="ml-1 mr-1 dataTable-select"
              type="select"
              id="sort-select"
              value={selectedSectorFilter ? selectedSectorFilter : ""}
              onChange={(e) => {
                setSelectedSectorFilter(e.target.value);
                setCurrentPage(1);
              }}
            >
              <option value={""}>{t("EmissionSources.sector")}</option>
              {sectorsOptions.map((sector, index) => (
                <option key={index} value={sector.value}>
                  {sector.label}
                </option>
              ))}
            </Input>
            <Input
              className="dataTable-filter"
              type="text"
              bsSize="ml"
              id="search-input"
              value={searchValue}
              onChange={handleFilter}
              placeholder={t("ByName") + " " + t("Filter")}
            />
          </Col>
        </Row>
        <DataTable
          noHeader
          pagination
          paginationServer
          className="react-dataTable"
          columns={serverSideColumns}
          sortIcon={<ChevronDown size={10} />}
          paginationComponent={CustomPagination}
          data={emissionSources}
          noDataComponent={
            <p className="p-2">
              {t("EmissionSources.emissionSource")}
              {t("Warnings.notFound")}
            </p>
          }
        />
      </Card>
      {renderEmissionSourceModal()}
    </div>
  );
};

export default EmissionSource;