import * as React from 'react';
import * as PropTypes from 'prop-types';
import { Tabs as TeaTabs, TabPanel } from 'tea-component';
import classNames from '../../utils/classnames';


export default function TabsPc({
  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 _tabs = Array.isArray(tabs) && tabs.length && tabs.map((item, index) => {
    return {
      id: item.name ?? index,
      label: item.title
    };
  });



  const onActive = (e) => {
    events && events.onActive(e);
  };
  return (
    <TeaTabs style={style} tabs={_tabs} onActive={onActive} className={classNames(
      "weda-tabs_pc",
      {
        [className]: className
      }
    )}>
      {_tabs?.map(
        (item, index) => (
          <TabPanel
            key={item.id}
            id={item.id}
            label={item.label}
          >
            {cachePanel[`panel${index + 1}`]}
          </TabPanel>
        )
      )}
    </TeaTabs>
  );
}

TabsPc.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,
};
