// @ts-nocheck
import * as React from 'react';
import styles from './styles.less';
import classnames from 'classnames';
import $ from 'jquery';

const { useEffect, useState, useRef } = React;
//
const defaultTabConfigList = [
  {
    title: '手机登录',
    value: 'phone',
  },
  {
    title: '邮箱登录',
    value: 'email',
  },
];

const CustomTab = (props) => {
  const { defaultValue } = props;

  const [tabIndex, setTabIndex] = useState(defaultValue || 0);
  const tabNavListEle = useRef(null);

  const { align, tabConfigList } = props;

  let preTabIndex = useRef(0);

  const settingLineParams = (mode = 'normal') => {
    const liEleList = $(tabNavListEle.current).children();
    const lineEleItem = $(tabNavListEle.current).next('div')[0];
    const checkedItemWidth = $(liEleList[tabIndex]).width();
    const checkedItemLeftPos = $(liEleList[tabIndex]).position().left;
    // 前一个选中元素的位置
    const preCheckedItemLeftPos = $(liEleList[preTabIndex.current]).position()
      .left;
    $(lineEleItem).css({ 'z-index': 101 });
    // 加载动画
    if (mode === 'reset') {
      $(lineEleItem).css({
        width: `${checkedItemWidth}px`,
        left: `${checkedItemLeftPos}px`,
      });
    } else {
      if (checkedItemLeftPos >= preCheckedItemLeftPos) {
        $(lineEleItem).animate(
          {
            width: `${
              checkedItemLeftPos - preCheckedItemLeftPos + checkedItemWidth
            }px`,
          },
          300,
          function () {
            $(lineEleItem).animate(
              {
                width: `${checkedItemWidth}px`,
                left: `${checkedItemLeftPos}px`,
              },
              150,
            );
          },
        );
      } else {
        $(lineEleItem).animate(
          {
            left: `${checkedItemLeftPos}px`,
            width: `${
              preCheckedItemLeftPos - checkedItemLeftPos + checkedItemWidth
            }px`,
          },
          300,
          function () {
            $(lineEleItem).animate(
              {
                width: `${checkedItemWidth}px`,
              },
              150,
            );
          },
        );
      }
    }
  };

  useEffect(() => {
    if (tabNavListEle?.current && preTabIndex.current === tabIndex) {
      settingLineParams('reset');
    }
  }, [tabNavListEle?.current, preTabIndex, tabIndex]);

  useEffect(() => {
    if (preTabIndex.current !== tabIndex) {
      settingLineParams();
    }
  }, [tabIndex]);

  const renderTaBNavGroup = () => {
    if (align === 'center') {
      return (
        <ul ref={tabNavListEle}>
          {tabConfigList.map((tabConfigItem, index) => (
            <div
              key={`tabNav${index}`}
              id={`tabNav${index}`}
              className={classnames(tabIndex == index ? styles.checked : null)}
              onClick={() => {
                preTabIndex.current = tabIndex;
                setTabIndex(index);
                if (props?.onChange) {
                  props.onChange(tabConfigItem?.value || '', index);
                }
              }}
            >
              {tabConfigItem?.title}
            </div>
          ))}
        </ul>
      );
    }
    return (
      <ul ref={tabNavListEle}>
        {tabConfigList.map((tabConfigItem, index) => (
          <li
            key={`tabNav${index}`}
            id={`tabNav${index}`}
            className={classnames(tabIndex == index ? styles.checked : null)}
            onClick={() => {
              preTabIndex.current = tabIndex;
              setTabIndex(index);
              if (props?.onChange) {
                props.onChange(tabConfigItem?.value || '', index);
              }
            }}
          >
            {tabConfigItem?.title}
          </li>
        ))}
      </ul>
    );
  };

  const renderTabPanelsGroup = () => {
    return (
      <div>
        {React.Children.map(props.children, (element, index) => {
          return (
            <div
              className={styles.tabPanelGroup}
              style={
                tabIndex === index ? { display: 'block' } : { display: 'none' }
              }
            >
              {element}
            </div>
          );
        })}
      </div>
    );
  };

  return (
    <div className={styles.tabContainer}>
      <nav className={align === 'center' ? styles.centerTabNav : styles.tabNav}>
        {renderTaBNavGroup()}
        <div className={styles.line}></div>
      </nav>
      {renderTabPanelsGroup()}
    </div>
  );
};

CustomTab.defaultProps = {
  defaultValue: 0,
  align: 'left',
  tabConfigList: defaultTabConfigList,
};

export default CustomTab;