import styled, { css } from 'styled-components';

const TabWrapper = styled.div`
  margin: 0;
  padding: 0;
`;

const TabList = styled.div`
  position: relative;
  margin: 0;
  padding: 0;

  &:focus {
    outline: none;
  }

  border-bottom: ${({ theme }) => theme.borderWidths.tabs.default} solid
    ${({ theme }) => theme.colors.tabs.border};
`;

const ActiveTabIndicator = styled.div`
  position: absolute;
  bottom: ${({ theme }) => theme.space.tabs.indicatorBottom};
  height: ${({ theme }) => theme.sizes.tabs.indicatorHeight};
  background: ${({ theme }) => theme.colors.tabs.focusBorder};
  transition: width 0.3s, left 0.3s, right 0.3s;
  margin: 0;
  padding: 0;
`;

const Tab = styled.button<{ themeVariant: 'basic' | 'active' | 'disabled' }>`
  &:focus {
    outline: none;
  }

  background: transparent;
  border: none;
  font-size: ${({ theme }) => theme.fontSizes.tabs.default};
  line-height: ${({ theme }) => theme.lineHeights.tabs.default};
  font-weight: ${({ theme }) => theme.fontWeights.tabs.default};
  margin: 0;
  padding: ${({ theme }) => theme.space.tabs.subPadding};

  ${({ themeVariant, theme }) => {
    switch (themeVariant) {
      case 'basic':
        return css`
          color: ${theme.colors.tabs.text};
          &:hover {
            color: ${theme.colors.tabs.hoverText};
          }
          &:focus {
            color: ${theme.colors.tabs.focusText};
          }
        `;
      case 'active':
        return css`
          color: ${theme.colors.tabs.activeText};
          &:focus {
            color: ${theme.colors.tabs.subFocusText};
            & ~ ${ActiveTabIndicator} {
              background-color: ${theme.colors.tabs.subFocusText};
            }
          }
        `;
      case 'disabled':
        return css`
          color: ${theme.colors.tabs.disabledText};
        `;
    }
  }};
`;

const TabPanel = styled.div`
  margin: 0;
  padding: ${({ theme }) => theme.space.tabs.panelPadding};
`;

export { TabWrapper, TabList, Tab, TabPanel, ActiveTabIndicator };