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

const ChartHelp = () => {
  return (
    <div className="w-[200px]">
      The chart shows the top 15 factors that have the greatest impact on the failure forecast for the object.<br/><br/>
      Factors can have a positive or negative impact.<br/><br/>
      The stronger the factor's impact on failures, the closer its value is to 100% (-100%).
    </div>
  )
}

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

  const getFooter = () => {
    return [
      <Button
        key="close-button"
        type="primary"
        onClick={() => setIsOpened(false)}
      >
        Close
      </Button>,
    ]
  }

  return (
    <div className="flex items-center">
      <Tooltip title="Impact of factors on forecast">
        <Button className="flex justify-center items-center h-6 ml-1 mb-1 p-2" type="primary" onClick={() => setIsOpened(true)}>
          Impact of factors on forecast
        </Button>
      </Tooltip>
      <Modal
        open={isOpened}
        title="Contribution of factors to failure forecast"
        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}>
                Point address:
              </Col>
              <Col span={12}>{point.building_address}</Col>
            </Row>
          </div>
          <Divider />
          <PointChart point={point} />
          <Popover
            content={<ChartHelp autoFocus={true}/>}
            trigger="click"
            placement="leftBottom"
            color="#ffffff"
          >
            <Button type="text" className="text-[#1890FF] p-0">How to read the chart?</Button>
          </Popover>

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