import React, { FC, FunctionComponentElement } from 'react';
import classNames from 'classnames';
import { TabItemProps } from './tabItem';
export interface TabsProps {
  // defaultIndex?: number;
  className?: string;
  onSelect?: (selectedIndex: number) => void;
  type?: 'line' | 'card';
  selectedIndex: number;
  setSelectedIndex: (index: number) => void;
  textColor?: string;
  backgroundColor?: string;
  selectedColor?: string;
  showTabs?: boolean;
}

export const Tabs: FC<TabsProps> = (props) => {
  const {
    className,
    onSelect,
    selectedIndex,
    setSelectedIndex,
    textColor,
    backgroundColor,
    selectedColor,
    children,
    type,
    showTabs,
  } = props;
  const handleClick = (
    e: React.MouseEvent,
    index: number,
    disabled: boolean | undefined
  ) => {
    if (!disabled) {
      setSelectedIndex(index);
      if (onSelect) {
        onSelect(index);
      }
    }
  };
  const navClass = classNames('paypay-tabs-nav', {
    'nav-line': type === 'line',
    'nav-card': type === 'card',
    'hide-tabs': !showTabs,
  });
  const renderNavLinks = () => {
    return React.Children.map(children, (child, index) => {
      const childElement = child as FunctionComponentElement<TabItemProps>;
      const { label, disabled } = childElement.props;
      const classes = classNames('paypay-tabs-nav-item', {
        'is-active': selectedIndex === index,
        disabled: disabled,
      });
      return (
        <li
          className={classes}
          key={`nav-item-${index}`}
          onClick={(e) => {
            handleClick(e, index, disabled);
          }}
          role="tab"
          style={{
            color: selectedIndex === index ? selectedColor : textColor,
          }}
        >
          {label}
        </li>
      );
    });
  };
  const renderContent = () => {
    return React.Children.map(children, (child, index) => {
      if (index === selectedIndex) {
        return child;
      }
    });
  };
  return (
    <div className={`paypay-tabs ${className}`}>
      <div className="paypay-tabs-content">{renderContent()}</div>
      <ul
        className={navClass}
        style={{
          background: backgroundColor,
        }}
      >
        {renderNavLinks()}
      </ul>
    </div>
  );
};

Tabs.defaultProps = {
  // defaultIndex: 0,
  type: 'line',
  textColor: '#000',
  backgroundColor: '#fff',
  selectedColor: '#aaa',
};
export default Tabs;