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

type TraficSectionProps = {
  selectedPoi: Poi;
};

const TraficSection: React.FC<TraficSectionProps> = ({ selectedPoi }) => {
  return (
    //) isSelected ?
    <>
      <div className="sectionTrafic">
        <div className="footfallLeftWrapper">
          <div className="averageFootfall">
            <div className="weekDistributionTitle">
              Average Trafic Daily Flow
            </div>
            <div className="averageFootfallWrapper">
              {selectedPoi
                ? formatNumber(selectedPoi?.data.traffic.avg_daily_flow)
                : "17 400"}
              <FaBusAlt style={{ marginLeft: "2%", fontSize: "40px" }} />
            </div>
          </div>
          <div className="weekDistribution">
            <div className="weekDistributionTitle">
              Trafic 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">
            Trafic Day Type Hour distribution
          </div>
          <ParentSize>
            {({ width, height }) => (
              <DayTypeGraph
                data={selectedPoi?.data.traffic.daytype_hour_distribution}
                width={width}
                height={height}
              />
            )}
          </ParentSize>
        </div>
      </div>
      <div className="tripPurposeChart">
        <div className="weekDistributionTitle">Trip Purpose</div>
        <ParentSize>
          {({ width, height }) => (
            <SimpleChartTripPurpose
              data={selectedPoi?.data.trip_purpose}
              width={width}
              height={height}
            />
          )}
        </ParentSize>
      </div>
    </>
    //) : ( <></>
  );
};

export default TraficSection;