import { Button, Col, Divider, Modal, Popover, Row, Tooltip } from "antd";
import { useState } from "react";
import { BiStats } from "react-icons/all.js";
import { twMerge } from "tailwind-merge";
import { PointChart } from "./PointChart.jsx";

const ChartHelp = () => {
  return (
    <div className="w-[200px]">
      График показывает топ-15 факторов, которые оказывают наибольшее влияние на прогнозный трафик в определённой точке.<br/><br/>
      Факторы могут оказывать положительное или отрицательное влияние.<br/><br/>
      Чем больше влияния оказывает фактор на прогнозный трафик, тем ближе его значение к 100% (-100%).
    </div>
  )
}

export const TrafficModal = ({point}) => {
  const [isOpened, setIsOpened] = useState(false);

  const getFooter = () => {
    return [
      <Button
        key="close-button"
        type="primary"
        onClick={() => setIsOpened(false)}
      >
        Закрыть
      </Button>,
    ]
  }

  return (
    <div className="flex items-center">
      {point.prediction_current}
      <Tooltip title="Влияние факторов на прогноз">
        <Button className="flex justify-center items-center h-6 ml-1 p-1" type="primary" onClick={() => setIsOpened(true)}>
          <BiStats />
        </Button>
      </Tooltip>
      <Modal
        open={isOpened}
        title="Вклад факторов в прогноз трафика"
        onCancel={() => setIsOpened(false)}
        width={800}
        footer={getFooter()}
        style={{ top: "15px" }}
      >
        <div>
          <div className="flex flex-col gap-2">
            <Row className={twMerge("p-1")}>
              <Col className={"font-semibold"} span={12}>
                Адрес точки:
              </Col>
              <Col span={12}>{point.address}</Col>
            </Row>
            <Row className={twMerge("p-1")}>
              <Col className={"font-semibold"} span={12}>
                Прогнозный траффик:
              </Col>
              <Col span={12}>{point.prediction_current}</Col>
            </Row>
          </div>
          <Divider />
          <PointChart point={point} />
          <p>* - в окрестности</p>
          <Popover
            content={<ChartHelp autoFocus={true}/>}
            trigger="click"
            placement="leftBottom"
            color="#ffffff"
          >
            <Button type="text" className="text-[#1890FF] p-0">Как читать график?</Button>
          </Popover>

        </div>
      </Modal>
    </div>
  );
}