import React, { useEffect, useState } from "react";
import classNames from "classnames";
import Collapse from "../collapse";
import Extra from "./Extra";
import styles from "./index.less";
import SortableCard from "./SortableCard";
import SortableTabs from "./SortableTabs";

export default function CollapseTabs({
  defaultCollapsed = true,
  header,
  bordered,
  activeKey: _activeKey,
  collapsed: _collapsed,
  children,
  onAdd,
  onDelete,
  onSort,
  isMultiple = false,
  isEditName = false,
  extraObj = {},
}) {
  const [activeKey, setActiveKey] = useState(_activeKey !== undefined ? _activeKey : "");
  const [selectedKeys, setSelectedKeys] = useState(_activeKey !== undefined ? [_activeKey] : []);
  const [mode, setMode] = useState("horizontal");
  const [collapsed, setCollapsed] = useState(
    _collapsed !== undefined ? _collapsed : defaultCollapsed,
  );

  useEffect(() => {
    _collapsed !== undefined && setCollapsed(_collapsed);
  }, [_collapsed]);

  useEffect(() => {
    if (children.length) {
      if (!activeKey && children[0].key) {
        setActiveKey(children[0].key);
        isMultiple && setSelectedKeys([children[0].key]);
      } else {
        let existActive = children.some((d) => d.key === activeKey);
        if (!existActive) {
          setActiveKey(children[0].key);
          isMultiple && setSelectedKeys([children[0].key]);
        }
      }
    }
  }, [children, isMultiple]);

  useEffect(() => {
    if (_activeKey !== undefined) {
      setActiveKey(_activeKey);
      isMultiple && setSelectedKeys([_activeKey]);
    }
  }, [_activeKey, isMultiple]);

  const handleAdd = async () => {
    let key = await onAdd(activeKey);
    setActiveKey(key);
    isMultiple && setSelectedKeys([key]);
    const el = document.getElementById(key);
    if (!el) return;
    el.scrollIntoView({
      behavior: "smooth",
    });
  };

  const handleDelete = () => {
    if (activeKey) {
      onDelete(activeKey);
      let index = children.findIndex((d) => d.key === activeKey);
      if (index !== -1) {
        let nextKey =
          children.length === 1 ? "" : index === 0 ? children[1].key : children[index - 1].key;
        setActiveKey(nextKey);
        if (isMultiple) {
          nextKey ? setSelectedKeys([nextKey]) : setSelectedKeys([]);
        }

        const el = document.getElementById(nextKey);
        if (!el) return;
        el.scrollIntoView({
          behavior: "smooth",
        });
      }
    }
  };

  const handleSort = (param) => {
    onSort(param);
  };

  const Tabs = mode === "horizontal" ? SortableTabs : SortableCard;

  return (
    <Collapse
      className={classNames(styles.collapseTabs, { line: !bordered })}
      collapsed={collapsed}
      bordered={bordered}
      onChange={setCollapsed}
      header={header}
      extra={
        <Extra
          mode={mode}
          hide={collapsed}
          onAdd={handleAdd}
          onDelete={handleDelete}
          onModeChange={setMode}
        />
      }
    >
      {children.length > 0 ? (
        <Tabs
          isMultiple={isMultiple}
          isEditName={isEditName}
          activeKey={activeKey}
          selectedKeys={selectedKeys}
          extraObj={extraObj}
          onActiveKeyChange={setActiveKey}
          onSort={handleSort}
          onSelectedKeysChange={setSelectedKeys}
        >
          {children}
        </Tabs>
      ) : (
        <span style={{ display: "block", padding: 12 }}>列表为空</span>
      )}
    </Collapse>
  );
}

const TabPane = () => <div />;

CollapseTabs.TabPane = TabPane;