import React, { useState } from 'react';
import styles from './index.less';
import { SwapOutlined } from '@easyv/react-icons';
const maxSize = 1; // children.length - 1 - 只能2个

type CurTabType = 0 | 1;

const EasyvCardSelect = ({
  style,
  current: active = 0,
  onChange,
  children,
}: {
  children: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
  style: React.CSSProperties;
  onChange?: (x: CurTabType) => void;
  current?: CurTabType;
}) => {
  const [current, setCurrent] = useState<CurTabType>(active);
  const currentItem = children[current];
  const handleClick = () => {
    let activeCurrent: CurTabType = 0;
    if (current < maxSize) {
      activeCurrent = 1;
    }
    setCurrent(activeCurrent);
    onChange?.(activeCurrent);
  };

  return (
    <span>
      <div className={styles.easyvCardSelect} style={style}>
        <span className={styles.firstItem}>
          {current ? children[0].props.name : children[1].props.name}
        </span>
        <span className={styles.lastItem} onClick={handleClick}>
          <SwapOutlined />
          {currentItem.props.name}
        </span>
      </div>
      <div className={styles.body}>
        <CardSelectTab key={currentItem.props.name} name={currentItem.props.name}>
          {currentItem.props.children}
        </CardSelectTab>
      </div>
    </span>
  );
};

const CardSelectTab = function ({ children }: { children: React.ReactElement; name: string }) {
  return <>{children}</>;
};

EasyvCardSelect.CardSelectTab = CardSelectTab;

export default EasyvCardSelect;
