import { useState } from "react";
import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
import Panel from "~/pages/Container/Map/components/Content/port/Panel";
import "./index.less";

const tabs = ["人员", "车辆"];
const records = [
  { NAME: "零号门", IN: "0", OUT: "0" },
  { NAME: "一号门", IN: "15", OUT: "12" },
  { NAME: "二号门", IN: "8", OUT: "10" },
  { NAME: "三号门", IN: "22", OUT: "18" },
  { NAME: "四号门", IN: "5", OUT: "7" },
  { NAME: "五号门", IN: "30", OUT: "25" },
  { NAME: "六号门", IN: "12", OUT: "14" },
  { NAME: "七号门", IN: "18", OUT: "16" },
  { NAME: "八号门", IN: "9", OUT: "11" },
  { NAME: "九号门", IN: "25", OUT: "20" },
];

/** 展示封闭区域进出明细并管理人员、车辆标签状态。 */
function EntryExitRecordPanel() {
  const [activeTab, setActiveTab] = useState(0);

  return (
    <Panel
      title="封闭区域进出情况统计"
      className="port-closed-area__record"
      extra={<Tabs activeTab={activeTab} onChange={setActiveTab} />}
    >
      <div className="port-closed-area-record__content">
        <div className="port-closed-area-record__table">
          <div className="port-closed-area-record__row">
            <div className="port-closed-area-record__cell">封闭区域名称</div>
            <div className="port-closed-area-record__cell">进入数</div>
            <div className="port-closed-area-record__cell">外出数</div>
          </div>
          <div className="port-closed-area-record__table-body">
            <SeamlessScroll list={records} step={0.5}>
              {records.map(item => (
                <div key={item.NAME} className="port-closed-area-record__row">
                  <div className="port-closed-area-record__cell">
                    {item.NAME}
                  </div>
                  <div className="port-closed-area-record__cell">{item.IN}</div>
                  <div className="port-closed-area-record__cell">
                    {item.OUT}
                  </div>
                </div>
              ))}
            </SeamlessScroll>
          </div>
        </div>
      </div>
    </Panel>
  );
}

function Tabs({ activeTab, onChange }) {
  return (
    <div className="port-closed-area-tabs">
      {tabs.map((item, index) => (
        <div
          key={item}
          className={`port-closed-area-tabs__item ${index === activeTab ? "port-closed-area-tabs__item--active" : ""}`}
          onClick={() => onChange(index)}
        >
          {item}
        </div>
      ))}
    </div>
  );
}

export default EntryExitRecordPanel;
