import React, {useState} from 'react';
import PropTypes from 'prop-types';
import {StyledTabs, StyledTab, VIEW_TYPE} from './style';

function getDefaultActiveTabId(tabs) {
  const [firstTab] = tabs;
  return firstTab.id;
}

const Tabs = ({
  tabs,
  defaultActiveTabId,
  onChange,
  primaryColor,
  viewType,
}) => {
  const [activeTabId, setActiveTabId] = useState(defaultActiveTabId !== undefined
    ? defaultActiveTabId
    : getDefaultActiveTabId(tabs));

  const onClick = ({id, ...rest}) => {
    setActiveTabId(id);
    onChange({
      id,
      ...rest,
    });
  };

  return (
    <StyledTabs viewType={viewType}>
      {tabs.map((tab) => (
        <StyledTab
          id={tab.id}
          key={tab.id}
          active={tab.id === activeTabId}
          primaryColor={primaryColor}
          onClick={() => onClick(tab)}
          viewType={viewType}
        >
          {tab.label}
        </StyledTab>
      ))}
    </StyledTabs>
  );
};

const tabShape = PropTypes.shape({
  id: PropTypes.string.isRequired,
  label: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.element,
    PropTypes.node,
  ]),
});

Tabs.propTypes = {
  tabs: PropTypes.arrayOf(tabShape).isRequired,
  defaultActiveTabId: PropTypes.string,
  onChange: PropTypes.func, // onChange(tab) => { ... }
  primaryColor: PropTypes.string,
  viewType: PropTypes.oneOf(Object.values(VIEW_TYPE)),
};

Tabs.defaultProps = {
  defaultActiveTabId: undefined,
  // eslint-disable-next-line @typescript-eslint/no-empty-function
  onChange: () => {},
  primaryColor: '',
  viewType: VIEW_TYPE.DEFAULT,
};

export {VIEW_TYPE};

export default Tabs;