import { useState, useEffect } from "react";
import { Poi } from "../../redux/types/Poi";
import { formatNumber } from "../../utils/formatNumber";
import { IoFootstepsSharp } from "react-icons/io5";
import ParentSize from "@visx/responsive/lib/components/ParentSize";
import BrushChart from "../../components/charts/brushChart/AreaChart";
import DayTypeGraph from "../../components/charts/tripeChart/DayTypeGraph";

type FootfallSectionProps = {
  selectedPoi: Poi;
};

const FootfallSection: React.FC<FootfallSectionProps> = ({ selectedPoi }) => {
  return (
    <div className="sectionBasicInfo">
      <div className="footfallLeftWrapper">
        <div className="averageFootfall">
          <div className="weekDistributionTitle">Average Footfall</div>
          <div className="averageFootfallWrapper">
            {selectedPoi
              ? formatNumber(selectedPoi?.data.footfall.avg_daily_number)
              : "17 400"}
            <IoFootstepsSharp style={{ marginLeft: "2%", fontSize: "50px" }} />
          </div>
        </div>
        <div className="weekDistribution">
          <div className="weekDistributionTitle">
            Footfall Week Distribution
          </div>
          <ParentSize>
            {({ width, height }) => (
              <BrushChart
                data={selectedPoi?.data.footfall.week_distribution}
                compact={false}
                width={width}
                height={height}
              />
            )}
          </ParentSize>
        </div>
      </div>
      <div className="basicInfoMap">
        <div className="weekDistributionTitle">
          Footfall Day Type Hour distribution
        </div>
        <ParentSize>
          {({ width, height }) => (
            <DayTypeGraph
              data={selectedPoi?.data.footfall.daytype_hour_distribution}
              width={width}
              height={height}
            />
          )}
        </ParentSize>
      </div>
    </div>
  );
};

export default FootfallSection;