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

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

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

  &::before {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    content: '';
    border-bottom: ${({ theme }) => theme.borderWidths.tabs.default} solid
      ${({ theme }) => theme.colors.tabs.border};
  }

  &:focus {
    outline: none;
  }
`;

const Tab = styled.button<{ themeVariant: 'basic' | 'active' | 'disabled' }>`
  position: relative;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  background-color: ${({ theme }) => theme.colors.tabs.background};
  border-radius: ${({ theme }) => theme.radii.tabs.default};
  margin: 0;
  padding: ${({ theme }) => theme.space.tabs.padding};
  font-size: ${({ theme }) => theme.fontSizes.tabs.default};
  line-height: ${({ theme }) => theme.lineHeights.tabs.default};
  font-weight: ${({ theme }) => theme.fontWeights.tabs.default};
  border: ${({ theme }) => theme.borderWidths.tabs.default} solid
    ${({ theme }) => theme.colors.tabs.border};
  margin-right: ${({ theme }) => theme.space.tabs.marginRight};
  box-sizing: border-box;
  border-bottom: ${({ theme }) => theme.borderWidths.tabs.default} solid
    ${({ theme }) => theme.colors.tabs.border};
  &:focus {
    outline: none;
  }

  ${({ 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`
          background-color: ${theme.colors.tabs.activeBackground};
          border-bottom: none;
          color: ${theme.colors.tabs.activeText};
          &:focus {
            border-color: ${theme.colors.tabs.focusBorder};
          }
        `;

      case 'disabled':
        return css`
          color: ${theme.colors.tabs.disabledText};
        `;
    }
  }};
`;

const TabTitleIcon = styled.span`
  display: inline-flex;
  margin: 0;
  padding: 0;
  margin-right: ${({ theme }) => theme.space.tabs.iconMarginRight};
`;

const TabPanel = styled.div`
  position: relative;
  border: ${({ theme }) => theme.borderWidths.tabs.default} solid
    ${({ theme }) => theme.colors.tabs.border};
  border-top: none;
  border-radius: ${({ theme }) => theme.radii.tabs.panel};
  margin: 0;
  padding: ${({ theme }) => theme.space.tabs.panelPadding};
  color: ${({ theme }) => theme.colors.tabs.panelText};
  background: ${({ theme }) => theme.colors.tabs.panelBackground};
  font-size: ${({ theme }) => theme.fontSizes.tabs.panel};
  line-height: ${({ theme }) => theme.lineHeights.tabs.panel};
  font-weight: ${({ theme }) => theme.fontWeights.tabs.panel};
`;

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