import React, { useState, useEffect } from "react";
import {
  Button,
  Card,
  CardHeader,
  CardTitle,
  Col,
  Dropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem,
  Label,
  Row,
} from "reactstrap";
import Select from "react-select";
import { useSelector, useDispatch } from "react-redux";
import { useTranslation } from "react-i18next";
import DataTable from "react-data-table-component";
import {
  getDataCenters,
  getDataCenterVMs,
} from "../redux/actions/dataCenter";
import { getAreasByDataCenter } from "../redux/actions/areas";
import { getMainDataTablesByVMs, testMainDataTables } from "../redux/actions/mainDataTables";
import { editNumbers } from "../components/edit-numbers";
import { PieChart } from "../components/graphics";
import ConstantEnergyGraphics from "../components/subSector-graphics/ConstantEnergyGraphics";
import TransportGraphics from "../components/subSector-graphics/TransportGraphics";
import WasteGraphics from "../components/subSector-graphics/WasteGraphics";
import { Download } from "react-feather";
import html2canvas from "html2canvas";
import jsPDF from "jspdf";
import { default as SweetAlert } from "sweetalert2";
import withReactContent from "sweetalert2-react-content";
import { ChromePicker } from "react-color";
import { customFilterForSelect } from "../utility/Utils";
import PdfHeader from "../components/pdf-header";

const Swal = withReactContent(SweetAlert);

const ColorPicker = ({ selectedColors, setSelectedColors }) => {
  const [showColorPicker, setShowColorPicker] = useState(false);
  const [currentColorIndex, setCurrentColorIndex] = useState(null);

  useEffect(() => {
    const storedColors = localStorage.getItem("selectedColors");
    if (storedColors) {
      setSelectedColors(JSON.parse(storedColors));
    }
  }, []);

  useEffect(() => {
    localStorage.setItem("selectedColors", JSON.stringify(selectedColors));
  }, [selectedColors]);

  const handleColorChange = (color) => {
    const newColor = color.hex;
    const updatedColors = [...selectedColors];
    updatedColors[currentColorIndex] = newColor;
    setSelectedColors(updatedColors);
  };

  const handleColorClick = (index) => {
    setCurrentColorIndex(index);
    setShowColorPicker(true);
  };

  const handleCloseColorPicker = () => {
    setCurrentColorIndex(null);
    setShowColorPicker(false);
  };

  const handlePickerOutsideClick = (event) => {
    // Renk seçici dışına tıklama kontrolü
    if (
      event.target.closest(".color-picker-container") === null &&
      event.target.closest(".color-box") === null
    ) {
      handleCloseColorPicker();
    }
  };

  useEffect(() => {
    // Tüm belgeye tıklama olayını dinle
    document.addEventListener("click", handlePickerOutsideClick);

    return () => {
      // Bileşen kaldırıldığında tıklama olayının dinlemesini kaldır
      document.removeEventListener("click", handlePickerOutsideClick);
    };
  }, []);

  return (
    <div className="color-picker-container">
      <h5>Grafik Renkleri</h5>
      {selectedColors.map((color, index) => (
        <div
          key={index}
          className="color-box"
          style={{
            backgroundColor: color,
            width: "30px",
            height: "15px",
            display: "inline-block",
            marginRight: "10px",
            cursor: "pointer",
          }}
          onClick={() => handleColorClick(index)}
        ></div>
      ))}
      {showColorPicker && (
        <div style={{ position: "absolute", zIndex: 1 }}>
          <ChromePicker
            color={selectedColors[currentColorIndex]}
            onChange={handleColorChange}
            //onChangeComplete={handleCloseColorPicker}
          />
        </div>
      )}
    </div>
  );
};

const Graphics = () => {
  const { t } = useTranslation();
  const dispatch = useDispatch();

  const dataCenterStore = useSelector((state) => state.dataCenter);
  const areasStore = useSelector((state) => state.areas);
  const mainDataTablesStore = useSelector((state) => state.mainDataTables);

  const [bringGraphics, setBringGraphics] = useState(false);
  const [mainDataTables, setMainDataTables] = useState([]);
  const [mainDataTablesFilterByYear, setMainDataTablesFilterByYear] = useState(
    []
  );
  const [summaryData, setSummaryData] = useState([]);
  const [pieChartData, setPieChartData] = useState([]);
  const [constantEnergyData, setConstantEnergyData] = useState([]);
  const [transportData, setTransportData] = useState([]);
  const [transportSubSectorData, setTransportSubSectorData] = useState([]);
  const [wasteData, setWasteData] = useState([]);

  const [dataCenterOptions, setDataCenterOptions] = useState([]);
  const [areasOptions, setAreasOptions] = useState([]);
  const [filter, setFilter] = useState(false);
  const [filterOptions, setFilterOptions] = useState({
    sector: "",
    area: "",
    city: "",
    district: "",
    neighborhood: "",
    year: "",
  });

  const [selectedDataCenter, setSelectedDataCenter] = useState("");
  const [dataCenterVMs, setDataCenterVMs] = useState([]);
  const roleTag = localStorage.getItem("roleTag");

  const currentYear = new Date().getFullYear();
  const renderYearOptions = () => {
    const years = [];
    for (let year = currentYear; year >= 1990; year--) {
      years.push({ label: year, value: year });
    }
    return years;
  };

  const [showConstantEnergy, setShowConstantEnergy] = useState(false);
  const [showTransport, setShowTransport] = useState(false);
  const [showWaste, setShowWaste] = useState(false);

  const [indexNumber, setIndexNumber] = useState(null);

  const [dropdownOpen, setDropdownOpen] = useState(false);
  const [selectedOption, setSelectedOption] = useState("");

  const [isPDFDownloading, setIsPDFDownloading] = useState(false);
  const [hideTables, setHideTables] = useState(false);
  const [hideComponents, setHideComponents] = useState({});

  const initialColors = [
    "orange",
    "gray",
    "#028a4a",
    "blue",
    "pink",
    "brown",
    "purple",
  ];
  const [selectedColors, setSelectedColors] = useState(initialColors);

  const serverSideColumnsOfMain = [
    {
      name: t("EmissionSources.sector"),
      selector: (row) => row.sector,
      sortable: false,
      cell: (row) => (
        <span
          style={{
            fontWeight:
              row?.sector?.tag === "Genel Toplam" ? "bold" : "initial",
          }}
        >
          {row.sector?.tag || "-"}
        </span>
      ),
    },
    {
      name: `Sera Gazı Miktarı (${t("DataInput.total")} tCO₂e)`,
      selector: (row) => row.totalEmission,
      sortable: false,
      cell: (row) => (
        <span
          style={{
            fontWeight:
              row?.sector?.tag === "Genel Toplam" ? "bold" : "initial",
          }}
        >
          {" "}
          {editNumbers(row.totalEmission) || "-"}
        </span>
      ),
    },
    {
      name: `${t("Oransal Dağılım")} %`,
      selector: (row) => row.percentage,
      sortable: false,
      cell: (row) => (
        <span
          style={{
            fontWeight:
              row?.sector?.tag === "Genel Toplam" ? "bold" : "initial",
          }}
        >
          {row.percentage || "-"}
        </span>
      ),
    },
  ];

  useEffect(() => {
    dispatch(getDataCenters());
  }, []);

  useEffect(() => {
    console.log('Data center selection changed:', selectedDataCenter);
    if (selectedDataCenter?.value) {
      console.log('Fetching data for data center:', selectedDataCenter.value);
      // Get areas for the selected data center
      dispatch(
        getAreasByDataCenter(selectedDataCenter.value)
      );
      
      // Get VMs for the selected data center
      getDataCenterVMs(selectedDataCenter.value).then(vms => {
        console.log('VMs received for data center:', vms);
        setDataCenterVMs(vms);
      });
    } else {
      console.log('No data center selected');
      setDataCenterVMs([]);
    }
  }, [selectedDataCenter]);

  useEffect(() => {
    console.log('Debug useEffect:', {
      filterOptionsYear: filterOptions?.year,
      selectedDataCenter: selectedDataCenter,
      dataCenterVMsLength: dataCenterVMs.length,
      filter: filter
    });
    
    if (filterOptions?.year && selectedDataCenter && dataCenterVMs.length > 0) {
      const vmIds = dataCenterVMs.map(vm => vm.id);
      console.log('Fetching main data tables with VM IDs:', vmIds);
      console.log('Filter options:', filterOptions);
      dispatch(
        getMainDataTablesByVMs({
          vmIds,
          filterOptions,
        })
      );
    } else {
      console.log('Conditions not met for fetching data:', {
        hasYear: !!filterOptions?.year,
        hasSelectedDataCenter: !!selectedDataCenter,
        vmCount: dataCenterVMs.length
      });
    }
  }, [filter, dataCenterVMs, dispatch, filterOptions, selectedDataCenter]);

  useEffect(() => {
    let dataCenterOptions = [];

    if (dataCenterStore?.dataCenters && dataCenterStore.dataCenters.length > 0) {
      dataCenterOptions = dataCenterStore.dataCenters.map((dataCenter) => ({
        value: dataCenter.id,
        label: dataCenter.dataCenter,
        externalId: dataCenter.externalId,
      }));
    }

    setDataCenterOptions(dataCenterOptions);
  }, [dataCenterStore]);

  useEffect(() => {
    setAreasOptions([]);

    const citiesOptions =
    areasStore?.areasWithCriteria
      ?.map((area) =>
        Array.isArray(area?.cities) // cities'in bir dizi olup olmadığını kontrol edin
          ? area.cities.map((city) => ({
              value: city?.id,
              label: city?.name,
              type: "city",
            }))
          : []
      )
      .flat() || []; // Eğer map boş dönerse, `flat` sonrası boş bir dizi kullan


    const districtsOptions = areasStore?.areasWithCriteria
      ?.map((area) => {
        return area?.districts?.map((district) => {
          return {
            value: district?.id,
            label: district?.name + " (" + district?.city?.name + ")",
            type: "district",
          };
        });
      })
      .flat();

    const neighborhoodsOptions = areasStore?.areasWithCriteria
      ?.map((area) => {
        return area?.neighborhoods?.map((neighborhood) => {
          return {
            value: neighborhood?.id,
            label:
              neighborhood?.name +
              " (" +
              neighborhood?.district?.name +
              " / " +
              neighborhood?.district?.city?.name +
              ")",
            type: "neighborhood",
          };
        });
      })
      .flat();

    setAreasOptions([
      ...citiesOptions || [],
      ...districtsOptions || [],
      ...neighborhoodsOptions || [],
    ]);
  }, [areasStore]);

  useEffect(() => {
    console.log('mainDataTablesStore changed:', mainDataTablesStore?.mainDataTables);
    console.log('mainDataTablesStore full state:', mainDataTablesStore);
    if (mainDataTablesStore?.mainDataTables) {
      console.log('Setting mainDataTablesFilterByYear from store:', mainDataTablesStore.mainDataTables);
      setMainDataTablesFilterByYear(mainDataTablesStore?.mainDataTables);
    } else {
      console.log('No mainDataTables in store');
    }
  }, [mainDataTablesStore.mainDataTables]);

  useEffect(() => {
    console.log('mainDataTablesFilterByYear changed:', mainDataTablesFilterByYear);
    console.log('mainDataTablesFilterByYear length:', mainDataTablesFilterByYear?.length);
    console.log('mainDataTablesFilterByYear data:', mainDataTablesFilterByYear);
    
    if (mainDataTablesFilterByYear?.length > 0) {
      let totalConstantEnergy = 0;
      let totalTransport = 0;
      let totalWaste = 0;

      for (let i = 0; i < mainDataTablesFilterByYear?.length; i++) {
        console.log('Processing record:', mainDataTablesFilterByYear[i]);
        if (mainDataTablesFilterByYear[i].sector?.tag === "Sabit Enerji") {
          totalConstantEnergy += mainDataTablesFilterByYear[i].totalEmission;
        }
        if (mainDataTablesFilterByYear[i].sector?.tag === "Ulaşım") {
          totalTransport += mainDataTablesFilterByYear[i].totalEmission;
        }
        if (mainDataTablesFilterByYear[i].sector?.tag === "Atık") {
          totalWaste += mainDataTablesFilterByYear[i].totalEmission;
        }
      }

      console.log('Calculated totals:', { totalConstantEnergy, totalTransport, totalWaste });

      let total = totalConstantEnergy + totalTransport + totalWaste;

      const processedData = [
        {
          sector: { tag: "Sabit Enerji" },
          totalEmission: totalConstantEnergy,
          percentage: ((totalConstantEnergy / total) * 100).toFixed(2) + "%",
        },
        {
          sector: { tag: "Ulaşım" },
          totalEmission: totalTransport,
          percentage: ((totalTransport / total) * 100).toFixed(2) + "%",
        },
        {
          sector: { tag: "Atık" },
          totalEmission: totalWaste,
          percentage: ((totalWaste / total) * 100).toFixed(2) + "%",
        },
        {
          sector: { tag: "Genel Toplam" },
          totalEmission: `${editNumbers(total)} tCO₂e`,
          percentage: "100,00%",
        },
      ];

      console.log('Setting mainDataTables:', processedData);
      setMainDataTables(processedData);
    } else {
      console.log('No mainDataTablesFilterByYear data found. Length:', mainDataTablesFilterByYear?.length);
      console.log('mainDataTablesStore state:', mainDataTablesStore);
    }
  }, [mainDataTablesFilterByYear]);

  useEffect(() => {
    console.log('mainDataTables changed for pie chart:', mainDataTables);
    let newChartData = mainDataTables.filter(
      (data) => data.sector.tag != "Genel Toplam"
    );
    console.log('Setting pieChartData:', newChartData);
    setPieChartData(newChartData);
  }, [mainDataTables]);

  useEffect(() => {
    if (!mainDataTables) return;

    const sectorTags = ["Genel Toplam", "Sabit Enerji", "Ulaşım", "Atık"];

    const filteredData = mainDataTables.filter((data) =>
      sectorTags.includes(data.sector.tag)
    );

    const summaryData = {
      areaName: selectedDataCenter?.label || "Seçili Veri Merkezi",
      totalEmission: filteredData.find(
        (data) => data.sector.tag === "Genel Toplam"
      )?.totalEmission,
      constantEnergyTotalEmission: editNumbers(
        filteredData.find((data) => data.sector.tag === "Sabit Enerji")
          ?.totalEmission
      ),
      transportTotalEmission: editNumbers(
        filteredData.find((data) => data.sector.tag === "Ulaşım")?.totalEmission
      ),
      wasteTotalEmission: editNumbers(
        filteredData.find((data) => data.sector.tag === "Atık")?.totalEmission
      ),
    };

    setSummaryData(summaryData);
  }, [mainDataTables, selectedDataCenter]);

  const calculateResult = (data, filterTag) => {
    const filteredData = data.filter((item) => item.sector?.tag === filterTag);

    if (filterTag === "Ulaşım") {
      setTransportSubSectorData(filteredData);
    }

    const result = filteredData.reduce((result, item) => {
      const existingItem = result.find(
        (resultItem) =>
          resultItem.sector.id === item.sector.id &&
          resultItem.subSector.id === item.subSector.id
      );
      if (existingItem) {
        existingItem.totalEmission += item.totalEmission;
      } else {
        result.push({
          sector: item.sector,
          subSector: item.subSector,
          totalEmission: item.totalEmission,
        });
      }
      return result;
    }, []);

    return calculateData(result);
  };

  const calculateData = (filteredData) => {
    if (filteredData?.length > 0) {
      const totalEmission = filteredData.reduce(
        (sum, item) => sum + item.totalEmission,
        0
      );

      const updatedData = filteredData.map((item) => {
        const percentage = ((item.totalEmission / totalEmission) * 100).toFixed(
          2
        );
        return { ...item, percentage };
      });

      updatedData.push({
        subSector: { tag: "Genel Toplam" },
        totalEmission: `${editNumbers(totalEmission)} tCO₂e`,
        percentage: "100,00",
      });

      return updatedData;
    }
  };

  useEffect(() => {
    if (mainDataTablesFilterByYear?.length > 0) {
      const newConstantEnergyData = calculateResult(
        mainDataTablesFilterByYear,
        "Sabit Enerji"
      );
      setConstantEnergyData(newConstantEnergyData);

      const newTransportData = calculateResult(
        mainDataTablesFilterByYear,
        "Ulaşım"
      );
      setTransportData(newTransportData);

      const newWasteData = calculateResult(mainDataTablesFilterByYear, "Atık");
      setWasteData(newWasteData);
    }
  }, [mainDataTablesFilterByYear]);

  const toggleDropdown = () => {
    setDropdownOpen(!dropdownOpen);
  };

  const handleOptionSelect = (option) => {
    setSelectedOption(option);

    const optionsMap = {
      "TÜM SEKTÖRLER": {
        showConstantEnergy: true,
        showWaste: true,
        showTransport: true,
      },
      "Sabit Enerji": {
        showConstantEnergy: true,
        showWaste: false,
        showTransport: false,
      },
      Ulaşım: {
        showConstantEnergy: false,
        showWaste: false,
        showTransport: true,
      },
      Atık: {
        showConstantEnergy: false,
        showWaste: true,
        showTransport: false,
      },
    };

    const { showConstantEnergy, showWaste, showTransport } = optionsMap[option];
    setShowConstantEnergy(showConstantEnergy);
    setShowWaste(showWaste);
    setShowTransport(showTransport);
  };

  const handleBringButtonPressed = () => {
    console.log('Getir button pressed');
    console.log('Current state:', {
      selectedDataCenter,
      filterOptions,
      dataCenterVMs,
      filter
    });
    setFilter(!filter);
    setBringGraphics(true);
  };

  const handleSelect = () => {
    setBringGraphics(false);
    setMainDataTables([]);
    setMainDataTablesFilterByYear([]);
    setPieChartData([]);
    setIndexNumber(null);
    setConstantEnergyData([]);
    setShowConstantEnergy(false);
    setTransportData([]);
    setTransportSubSectorData([]);
    setShowTransport(false);
    setWasteData([]);
    setShowWaste(false);
    setSelectedOption(t("EmissionSources.sectors"));
  };

  const handleDownload = async () => {
    setIsPDFDownloading(true);

    const result = await Swal.fire({
      title: `PDF çıktısı almak istediginize emin misiniz?`,
      icon: "question",
      showCancelButton: true,
      confirmButtonText: "Evet",
      cancelButtonText: t("Cruds.cancel"),
      customClass: {
        confirmButton: "btn btn-primary",
        cancelButton: "btn btn-danger ml-1",
      },
      buttonsStyling: false,
    });
    if (result.value !== null && result.value === true) {
      const input = [document.getElementById("graphics-container1")];
      if (constantEnergyData && showConstantEnergy) {
        input.push(
          document.getElementById("graphics-container2"),
          document.getElementById("graphics-container3")
        );
      }
      if (transportData && showTransport) {
        input.push(
          document.getElementById("graphics-container4"),
          document.getElementById("graphics-container5"),
          document.getElementById("graphics-container6")
        );
      }
      if (wasteData && showWaste) {
        input.push(document.getElementById("graphics-container-waste"));
      }

      const generatePDF = async () => {
        const doc = new jsPDF("p", "mm");

        for (let i = 0; i < input.length; i++) {
          const a = input[i];

          const canvas = await html2canvas(a);

          const imgWidth = 208;
          const pageHeight = 295;
          const imgHeight = (canvas.height * imgWidth) / canvas.width;
          let heightLeft = imgHeight;
          let position = 0;
          heightLeft -= pageHeight;
          const img = canvas.toDataURL("image/png");
          doc.addImage(
            img,
            "PNG",
            0,
            position,
            imgWidth,
            imgHeight,
            "",
            "FAST"
          );
          while (heightLeft >= 0) {
            position = heightLeft - imgHeight;
            doc.addPage();
            doc.addImage(
              canvas,
              "PNG",
              0,
              position,
              imgWidth,
              imgHeight,
              "",
              "FAST"
            );
            heightLeft -= pageHeight;
          }
          if (input.length > i + 1) {
            doc.addPage();
          }
        }

        doc.save("rapor.pdf");
        setIsPDFDownloading(false);
      };

      generatePDF();
    } else {
      setIsPDFDownloading(false);
    }
  };

  const handleCheckboxChange = (componentName) => {
    setHideComponents((prevState) => ({
      ...prevState,
      [componentName]: !prevState[componentName],
    }));
  };

  return (
    <div style={{ marginTop: "2%", marginBottom: "2%" }}>
      <Card>
        <CardHeader className="border-bottom">
          <CardTitle tag="h4">Reports</CardTitle>
          <Button
            className="ml-2"
            color="primary"
            onClick={handleDownload}
            disabled={isPDFDownloading}
          >
            <Download size={15} />
            <span className="align-middle ml-50">
              {isPDFDownloading ? "İndiriliyor..." : "PDF"}
            </span>
          </Button>
        </CardHeader>
      </Card>
      <Row className="mx-0 mt-1 mb-50">
        <Col sm="6" md="6">
          <div className="d-flex align-items-center mb-1">
            <Label className="mr-1 h5" for="datacenter-filter">
              {t("DataCenter.title")}
            </Label>
            <Select
              className="react-select w-100"
              id="datacenter-filter"
              closeMenuOnSelect={true}
              menuPlacement="auto"
              placeholder=""
              filterOption={customFilterForSelect}
              options={dataCenterOptions}
              onChange={(value) => {
                handleSelect();
                setFilterOptions({
                  sector: "",
                  area: "",
                  city: "",
                  district: "",
                  neighborhood: "",
                  year: filterOptions.year,
                });
                setSelectedDataCenter(value);
              }}
            />
          </div>
        </Col>
        <Col sm="6" md="3">
          <div className="d-flex align-items-center mb-1">
            <Label className="mr-1 h5" for="year-select">
              {t("DataInput.year")}
            </Label>
            <Select
              id="year-select"
              isClearable={false}
              closeMenuOnSelect={true}
              maxMenuHeight={150}
              menuPlacement="auto"
              className="react-select w-100"
              placeholder=""
              options={renderYearOptions()}
              defaultValue={filterOptions?.year}
              onChange={(value) => {
                handleSelect();
                setFilterOptions({
                  ...filterOptions,
                  year: value,
                });
              }}
            />
          </div>
        </Col>
        <Col sm="6" md="3">
          <div className="d-flex align-items-center justify-content-between">
            <div className="d-flex align-items-center">
              <Button
                color="primary"
                onClick={handleBringButtonPressed}
                disabled={!(selectedDataCenter && filterOptions.year)}
              >
                <span className="align-middle ml-50">Getir</span>
              </Button>
              <Button
                color="secondary"
                onClick={() => dispatch(testMainDataTables())}
                className="ml-2"
              >
                <span className="align-middle ml-50">Test Data</span>
              </Button>
            </div>
            {mainDataTables?.length > 1 && (
              <div className="ml-2">
                <input
                  id="hide-tables-checkbox"
                  className="form-check-input"
                  type="checkbox"
                  role="switch"
                  checked={hideTables}
                  onChange={(e) => {
                    setHideTables(e.target.checked);
                  }}
                />
                <label
                  htmlFor="hide-tables-checkbox"
                  className="form-check-label h6"
                >
                  Tabloları sakla
                </label>
              </div>
            )}
          </div>
        </Col>
      </Row>
      {mainDataTables?.length > 1 && (
        <Row className="mx-0 mt-1 mb-1 d-flex justify-content-end">
          <ColorPicker
            selectedColors={selectedColors}
            setSelectedColors={setSelectedColors}
          />
        </Row>
      )}
      {mainDataTables?.length === 0 && bringGraphics && (
        <Label>Gösterilecek bir veri bulunmamaktadır</Label>
      )}
      <div id="graphics-container1">
        {mainDataTables?.length > 1 && isPDFDownloading && (
          <>
            <PdfHeader
              areaName={summaryData.areaName}
              year={filterOptions?.year?.value}
            />
            <Row className="mx-0 mt-2 mb-5 justify-content-center">
              <span style={{ fontSize: "30px" }} className="w-75 text-left p-1">
                {summaryData.areaName} idari sınırları içerisindeki toplam sera
                gazı emisyonu <b>{summaryData.totalEmission}</b> olarak ortaya
                çıkmıştır. Hesaplanan emisyon değerinin sektör bazlı dağılımına
                bakıldığında; Sabit Enerji sektöründe{" "}
                <b>{summaryData.constantEnergyTotalEmission} tCO₂e</b>, Ulaşım
                sektöründe <b>{summaryData.transportTotalEmission} tCO₂e </b>
                ve Atık sektöründe <b>
                  {summaryData.wasteTotalEmission} tCO₂e
                </b>{" "}
                sera gazı emisyonu gerçekleştiği görülmektedir.
              </span>
            </Row>
          </>
        )}
        {mainDataTables?.length > 1 && (
          <>
            <Row className="mx-0 mt-1 mb-5 justify-content-center">
              {!hideTables &&
                !(isPDFDownloading && hideComponents["sectors-dataTable"]) && (
                  <Col sm="9" md="9">
                    {!isPDFDownloading && (
                      <input
                        type="checkbox"
                        checked={!hideComponents["sectors-dataTable"]}
                        onChange={() =>
                          handleCheckboxChange("sectors-dataTable")
                        }
                      />
                    )}
                    <DataTable
                      title={
                        <h5
                          style={{
                            textAlign: "end",
                            fontWeight: "bold",
                            fontSize: `${isPDFDownloading ? "30px" : ""}`,
                          }}
                        >
                          {selectedDataCenter?.label || "Seçili Veri Merkezi"} Sera Gazı Emisyon Dağılımı
                        </h5>
                      }
                      className="react-dataTable mt-1 border-black"
                      columns={serverSideColumnsOfMain}
                      data={mainDataTables}
                      noDataComponent={
                        <p className="p-2">
                          {t("DataInput.report")}
                          {t("Warnings.notFound")}
                        </p>
                      }
                      customStyles={
                        isPDFDownloading
                          ? {
                              rows: {
                                fontSize: "25px",
                              },
                              headCells: {
                                style: {
                                  fontSize: "23px",
                                },
                              },
                            }
                          : ""
                      }
                    />
                  </Col>
                )}
            </Row>
            <Row className="mt-5 justify-content-center">
              {!(isPDFDownloading && hideComponents["sectors-pie-chart"]) && (
                <div
                  style={{
                    width: `35%`,
                  }}
                >
                  {!isPDFDownloading && (
                    <input
                      type="checkbox"
                      checked={!hideComponents["sectors-pie-chart"]}
                      onChange={() => handleCheckboxChange("sectors-pie-chart")}
                    />
                  )}
                  <PieChart
                    data={pieChartData}
                    setIndexNumber={setIndexNumber}
                    type="sector"
                    colors={selectedColors}
                  />
                </div>
              )}
              {indexNumber != null && (
                <div
                  style={{
                    width: `35%`,
                    marginLeft: "5%",
                  }}
                >
                  {!isPDFDownloading && (
                    <input
                      type="checkbox"
                      checked={indexNumber != null ? true : false}
                      onChange={() => setIndexNumber(null)}
                    />
                  )}

                  <PieChart
                    data={[constantEnergyData, transportData, wasteData]}
                    indexNumber={indexNumber}
                    type="subSector"
                    colors={selectedColors}
                  />
                </div>
              )}
            </Row>
          </>
        )}
      </div>
      {mainDataTables?.length > 1 && !isPDFDownloading && (
        <Row className="mx-0 my-5 justify-content-center">
          <Col sm="4" md="4">
            <Dropdown isOpen={dropdownOpen} toggle={toggleDropdown}>
              <DropdownToggle caret color="primary" className="w-100">
                {selectedOption
                  ? selectedOption.toUpperCase()
                  : t("EmissionSources.sectors")}
              </DropdownToggle>
              <DropdownMenu className="w-100">
                <DropdownItem
                  key={"all-sectors"}
                  className="w-100"
                  onClick={() => handleOptionSelect("TÜM SEKTÖRLER")}
                >
                  TÜM SEKTÖRLER
                </DropdownItem>
                {pieChartData
                  .filter((data) => data.totalEmission != 0)
                  .map((data, index) => (
                    <DropdownItem
                      key={index}
                      className="w-100"
                      onClick={() => handleOptionSelect(data.sector.tag)}
                    >
                      {data.sector.tag.toUpperCase()}
                    </DropdownItem>
                  ))}
              </DropdownMenu>
            </Dropdown>
          </Col>
        </Row>
      )}
      {showConstantEnergy && constantEnergyData && (
        <ConstantEnergyGraphics
          mainDataTablesFilterByYear={mainDataTablesFilterByYear}
          constantEnergyData={constantEnergyData}
          isPDFDownloading={isPDFDownloading}
          hideTables={hideTables}
          colors={selectedColors}
          hideComponents={hideComponents}
          handleCheckboxChange={handleCheckboxChange}
          areaName={summaryData.areaName}
          year={filterOptions?.year?.value}
        />
      )}
      {showTransport && transportData && (
        <TransportGraphics
          transportData={transportData}
          transportSubSectorData={transportSubSectorData}
          isPDFDownloading={isPDFDownloading}
          hideTables={hideTables}
          colors={selectedColors}
          hideComponents={hideComponents}
          handleCheckboxChange={handleCheckboxChange}
          areaName={summaryData.areaName}
          year={filterOptions?.year?.value}
        />
      )}
      {showWaste && wasteData && (
        <WasteGraphics
          wasteData={wasteData}
          isPDFDownloading={isPDFDownloading}
          hideTables={hideTables}
          colors={selectedColors}
          hideComponents={hideComponents}
          handleCheckboxChange={handleCheckboxChange}
          areaName={summaryData.areaName}
          year={filterOptions?.year?.value}
        />
      )}
    </div>
  );
};

export default Graphics;