import { Collapse } from "antd";
import { useSelector } from "react-redux";

import { mapStateSelector } from "@store";
import { IOverlay } from "@store";

import "./style.less";

const { Panel } = Collapse;

export type OverlayListProps = {
  overlays: IOverlay[];
};

const OverlayList = (props: OverlayListProps) => {
  const { overlays } = props;

  return (
    <>
      {overlays.map((overlay, index) => {
        return (
          <div key={index} className="overlay-item">
            {overlay.name}
          </div>
        );
      })}
    </>
  );
};

const Catalog = () => {
  // const callback = (key: string | string[]) => console.log(key);
  const { rectangles, polygons, polylines, circles } =
    useSelector(mapStateSelector);
  return (
    <Collapse
      defaultActiveKey={["1"]}
      // onChange={callback}
      expandIconPosition="right"
    >
      <Panel header="矩形" key={1}>
        <OverlayList overlays={rectangles} />
      </Panel>
      <Panel header="多边形" key={2}>
        <OverlayList overlays={polygons} />
      </Panel>
      <Panel header="多段线" key={3}>
        <OverlayList overlays={polylines} />
      </Panel>
      <Panel header="圆形" key={4}>
        <OverlayList overlays={circles} />
      </Panel>
    </Collapse>
  );
};

export default Catalog;