import { useState, useEffect } from "react";
import ParentSize from "@visx/responsive/lib/components/ParentSize";
import PieChart from "../../components/charts/pieChart/Pie";
import { Poi } from "../../redux/types/Poi";
import LegendChart from "../../components/generalInformation/legend/Legend";
import CloudWord from "../../components/charts/wordCloudChart/CloudWord";
import { characterizeSocioDemographicData } from "../../algorithm/WordCloud";

type DemographicsSectionProps = {
  selectedPoi: Poi;
};

const DemographicsSection: React.FC<DemographicsSectionProps> = ({
  selectedPoi,
}) => {
  return (
    <div className="demographicsSection">
      <div className="mainDemoPie">
        <div className="mainDemoPieTitle">Total Socio Demographics</div>
        <ParentSize>
          {({ width, height }) => (
            <PieChart
              data={selectedPoi?.data.socio_demography}
              width={width}
              height={height}
              flag={0}
            />
          )}
        </ParentSize>
      </div>
      <div className="otherDemoPieWrapper">
        <div className="menAndWomenPies">
          <div className="menPie">
            <div className="weekDistributionTitle">
              Masculine Socio Demographics
            </div>
            <ParentSize>
              {({ width, height }) => (
                <PieChart
                  data={selectedPoi?.data.socio_demography.filter(
                    (item) => item.gender.toUpperCase() === "MALE"
                  )}
                  width={width}
                  height={height}
                  flag={1}
                />
              )}
            </ParentSize>
          </div>
          <div className="womenPie">
            <div className="weekDistributionTitle">
              Feminine Socio Demographics
            </div>
            <ParentSize>
              {({ width, height }) => (
                <PieChart
                  data={selectedPoi?.data.socio_demography.filter(
                    (item) => item.gender.toUpperCase() === "FEMALE"
                  )}
                  width={width}
                  height={height}
                  flag={2}
                />
              )}
            </ParentSize>
          </div>
        </div>
        <div className="LegendChart">
          <div className="wordCloud">
            <ParentSize>
              {({ width, height }) => (
                <LegendChart width={width} height={height} />
              )}
            </ParentSize>
          </div>
          <div className="wordCloud">
            <ParentSize>
              {({ width, height }) => (
                <CloudWord
                  demographicWords={characterizeSocioDemographicData(
                    selectedPoi?.data.socio_demography
                  )}
                  width={width}
                  height={height - 15}
                />
              )}
            </ParentSize>
          </div>
        </div>
      </div>
    </div>
  );
};

export default DemographicsSection;