/*
 * Copyright (c) 2018-present, Revolut LTD.
 *
 * This source code is licensed under the Apache 2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

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

import { colorGet, ifProp } from '../../style/utils'
import { ColorsFields } from '../../style/themeFields'
import { rgba } from '../../style/helpers'

const isPositionBottom = ({ pointerPosition }) => pointerPosition === 'bottom'

export const TabsWrap = styled.nav<{ pointerPosition: string }>`
  display: flex;
  flex-direction: ${ifProp(isPositionBottom, 'column', 'column-reverse')};
  align-items: start;
  justify-content: space-between;
  border-bottom: 1px solid ${rgba(colorGet(ColorsFields.Text), 0.1)};
  background-color: transparent;
  position: relative;
  z-index: 3;
`
const isActiveOr = ifProp<{ active: boolean }>('active')

export const TabItem = styled.div<{ active: boolean }>`
  display: inline-flex;
  flex-direction: column;
  padding: 5px 0 3px;
  margin-left: 10px;
  margin-right: 10px;
  color: ${colorGet(ColorsFields.TextInactive)};
  font-weight: ${isActiveOr('500', 'normal')};
  font-size: 14px;
  cursor: pointer;
  transition-duration: 0.3s;
  transition-property: color;
  user-select: none;

  ${isActiveOr(
    css`
      color: ${colorGet(ColorsFields.Text)};
      cursor: default;
    `,
    '',
  )};

  &:hover {
    color: ${colorGet(ColorsFields.Text)};
  }

  &:first-of-type {
    margin-left: 0;
  }
`

export const Pointer = styled.div`
  position: relative;
  width: 0;
  height: 2px;
  background-color: ${colorGet(ColorsFields.Highlight)};
  transition-timing-function: cubic-bezier(0.08, 1.1, 0.9, 0.99);
  transition-duration: 0.3s;
  transition-property: left, width;
`

export const HiddenValue = styled.div`
  font-weight: 500;
  visibility: hidden;
  height: 0;
  line-height: 0;
  padding: 0;
  margin: 0;
  flex-grow: 0;
`