import { Button, Col, Divider, Modal, Popover, Row, Tooltip } from "antd";
import {useSimulateAccident} from "../stores/useSimulateAccident.js";
import {Title} from "../components/Title.jsx";
import { AccidentSimulationModal } from "./AccidentSimulation/AccidentSimulationModal.jsx";
import { useState } from "react";
import { BiInfoCircle } from "react-icons/all.js";

export const AccidentSimulationResults = () => {
  const {selectedSourceConfig, setSelectedSourceConfig} = useSimulateAccident();
  const [modalOpen, setModalOpen] = useState(false);
  if (!selectedSourceConfig.pointId) return "";

  const {pointId} = selectedSourceConfig;

  const stopSimulation = () => setSelectedSourceConfig({sourceId: null, dispatcherNumber: null})

  return (
    <>
      <div className='absolute bottom-[20px] left-[20px] text-grey z-10 bg-white-background rounded-xl p-3 text-center'>
        <Title text={`Results of TP failure simulation ${selectedSourceConfig?.sourceId}`}/>
        <div className="flex justify-center flex-row gap-2">
          <Button type="primary" onClick={stopSimulation}>Cancel</Button>
          {!!pointId && (
            <Popover content={<AccidentSimulationModal id={pointId} />}>
              <Button className="flex justify-center items-center" type="primary" onClick={() => setModalOpen(true)}>
                <BiInfoCircle className="w-4 h-4" />
              </Button>
            </Popover>
          )}

        </div>

      </div>
      {!!pointId && <AccidentSimulationModal id={pointId} modalOpen={modalOpen} setModalOpen={setModalOpen} />}
    </>
  );
};
