import styled, { css } from 'styled-components';
import theme from 'styles/theme';
import { ITabs, ITabPanel } from './types';

export const Wrapper = styled.div<any>`
    .kwai-tabContent {
        ${contentGap}
    }
    .kwai-tabBar {
        ${p =>
            p.tabsLocation === 'left' &&
            css`
                float: left;
                width: 200px;
            `}
    }
`;

export const TabBar = styled.div<ITabs>`
    text-align: ${p => p.tabHeaderAlign};
    ${barDimension}
`;

export const ContentArea = styled.div<any>``;

export const TabItem = styled.div<any>`
    display: ${p => (p.tabsLocation === 'left' ? 'block' : 'inline-block')};
    position: relative;
    cursor: pointer;
    text-align: ${p => p.tabHeaderAlign};
    color: #101934;
    letter-spacing: 0.3px;
    ${p =>
        p.tabsLocation !== 'left' &&
        css`
            &:not(:last-child) {
                margin-right: 48px;
            }
        `}
    ${p =>
        p.showUnderLine
            ? css`
                  &::after {
                      background: ${p => p.theme.brand};
                      transform-origin: center;
                      transition: width 0.15s;
                      position: absolute;
                      height: 2px;
                      bottom: 0;
                      left: 50%;
                      transform: translateX(-50%);
                      width: 0;
                      content: '';
                      display: block;
                  }
              `
            : css`
                  color: #9a9eac;
                  &:hover,
                  &.kwai-tabActive {
                      color: #00a5aa;
                  }
                  &.kwai-tabActive {
                      background-color: #ebf8f9;
                  }
              `}
    
    &.kwai-tabActive::after {
        width: 100%;
    }
    ${tabItemStyle}
`;
TabItem.defaultProps = { theme };

/**
 * calc functions
 */

function tabItemStyle(p: ITabs) {
    if (p.tabsLocation === 'top') {
        return css`
            font-size: 16px;
            line-height: ${getSize(p)}px;
            height: ${getSize(p)}px;
        `;
    } else {
        return css`
            font-size: 14px;
        `;
    }
}

function contentGap(p: ITabs) {
    if (p.tabsLocation === 'top') {
        return css`
            margin-top: 32px;
        `;
    } else {
        return css`
            margin-left: 200px;
        `;
    }
}

function barDimension(p: ITabs) {
    if (p.tabsLocation === 'top') {
        return css`
            height: ${getSize(p)}px;
        `;
    } else {
        return css`
            width: ${getSize(p)}px;
        `;
    }
}

function getSize(p: ITabs) {
    return p.size === 'large' ? 48 : 40;
}