import styled, {css} from 'styled-components';
import {
  actionColor,
  gray50,
  gray70,
  gray95,
  spacing,
  black,
  white,
  borderRadius,
} from '@propellerads/stylevariables';

const VIEW_TYPE = {
  DEFAULT: 'default',
  ROUNDED: 'rounded',
};

const StyledTabs = styled.ul`
    display: flex;
    list-style: none;
    overflow: auto;
    white-space: nowrap;
    margin: 0;
    padding: 0;
    font-weight: bold;
    color: ${gray70};
    border-bottom: 1px solid ${gray95};
    
    ${(props) => props.viewType === VIEW_TYPE.ROUNDED && css`
        display: inline-flex;
        color: ${gray50};
        border-bottom: 0 none;
        border-radius: ${borderRadius}px;
        background: ${gray95};
        padding: ${spacing}px;
        font-weight: normal;
    `}
`;

const StyledTab = styled.li`
    margin-right: ${spacing * 6}px;
    padding-bottom: ${spacing * 4}px;
    cursor: pointer;
    
    &:last-child {
        margin-right: 0;
    }
    
    ${(props) => props.active && css`
        color: ${props.primaryColor || actionColor};
        border-bottom: 2px solid ${props.primaryColor || actionColor};
    `}
    
    ${(props) => props.viewType === VIEW_TYPE.ROUNDED && css`
        margin-right: ${spacing * 2}px;
        color: ${props.primaryColor || gray50};
        border-bottom: 0 none;
        padding: ${spacing}px ${spacing * 2}px;
        line-height: 20px;
    `}
    
    ${(props) => props.viewType === VIEW_TYPE.ROUNDED && props.active && css`
        background: ${white};
        color: ${black};
        border-radius: ${borderRadius}px;
        border-bottom: 0 none;
        box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25);
    `}
`;

export {StyledTabs, StyledTab, VIEW_TYPE};