import React, { useState, useMemo } from 'react';
import * as PropTypes from 'prop-types';
import classnames from 'classnames';

import './index.css';
import classNames from '../../utils/classnames';

export default function TabsH5({
  tabs,
  events,
  className,
  panel1,
  panel2,
  panel3,
  panel4,
  panel5,
  panel6,
  panel7,
  panel8,
  panel9,
  panel10,
  panel11,
  panel12,
  panel13,
  panel14,
  panel15,
  panel16,
  panel17,
  panel18,
  panel19,
  panel20,
  style
}) {
  const cachePanel = {
    panel1,
    panel2,
    panel3,
    panel4,
    panel5,
    panel6,
    panel7,
    panel8,
    panel9,
    panel10,
    panel11,
    panel12,
    panel13,
    panel14,
    panel15,
    panel16,
    panel17,
    panel18,
    panel19,
    panel20
  };
  const [currentIndex, setCurrentIndex] = useState(0);
  const stickyStyle = useMemo(() => {
    const length = tabs.length;
    return {
      width: `${1 / length * 100}%`,
      transform: `translate3d( ${currentIndex * 100}%, 0, 0)`
    };
  }, [tabs, currentIndex]);
  
  return (
    <div className={classNames("weda-tabs weda-ui", {
      [className]: className
    })} style={style}>
      <div className="weda-tabs__nav">
        {
          tabs?.map(({ name, title }, index) => (
            <div
            className={
              classnames(
                'weda-tabs__nav-cell',
                currentIndex === index && 'active',
                currentIndex > 5 && 'scroll'
                )
              }
              key={name || index}
              onClick={(event) => {
                setCurrentIndex(index);
                events && events.change(tabs[index], { event });
              }}
              >
              {title}
            </div>
          ))
        }

        <div
          className="weda-tabs__nav-sticky"
          style={stickyStyle}
          ></div>
      </div>

      <div className={classNames({
        'weda-tabs__panel': true,
      })}>
        {cachePanel[`panel${currentIndex + 1}`]}
      </div>
    </div>
  );
}


TabsH5.propTypes = {
  tabs: PropTypes.array,
  className: PropTypes.string,
  style: PropTypes.object,
  events: PropTypes.objectOf(PropTypes.func),
  panel1: PropTypes.node,
  panel2: PropTypes.node,
  panel3: PropTypes.node,
  panel4: PropTypes.node,
  panel5: PropTypes.node,
  panel6: PropTypes.node,
  panel7: PropTypes.node,
  panel8: PropTypes.node,
  panel9: PropTypes.node,
  panel10: PropTypes.node,
  panel11: PropTypes.node,
  panel12: PropTypes.node,
  panel13: PropTypes.node,
  panel14: PropTypes.node,
  panel15: PropTypes.node,
  panel16: PropTypes.node,
  panel17: PropTypes.node,
  panel18: PropTypes.node,
  panel19: PropTypes.node,
  panel20: PropTypes.node,
};
