// @ts-nocheck
import React, { useEffect, useRef, useState } from 'react';
import styles from './styles.less';
import classnames from 'classnames';
import { Form, Row, Col } from 'antd4';
import { Robot_Icon_svg, Email_Icon_svg } from '@/data';

export const sliderRadioGroupConfigList = [
  {
    icon: <Email_Icon_svg style={{ width: '18px', height: '24px' }} />,
    title: '邮箱登录',
    value: 'email',
  },
  {
    icon: (
      <Robot_Icon_svg
        style={{ width: '18px', height: '13px', marginBottom: '2px' }}
      />
    ),
    title: '手机登录',
    value: 'phone',
  },
];

const SliderRadioGroup = (props) => {
  const [tabIndex, setTabIndex] = useState(
    props?.value || sliderRadioGroupConfigList[0]?.value,
  );

  const tabContainerEle = useRef(null);

  const handleTabClick = (value) => {
    setTabIndex(value);
    if (props?.onChange) {
      props.onChange(value);
    }
  };

  return (
    <div>
      <nav className={styles.sliderRadioGroup} ref={tabContainerEle}>
        {sliderRadioGroupConfigList.map((configItem, index) => {
          return (
            <div
              value={configItem?.value}
              onClick={() => handleTabClick(configItem?.value, index)}
              className={classnames(
                styles.sliderItem,
                tabIndex === configItem.value
                  ? styles.selected
                  : styles.unSelected,
              )}
            >
              {configItem?.icon}
              {configItem?.title || '测试滑动'}
            </div>
          );
        })}
      </nav>
    </div>
  );
};

export default SliderRadioGroup;