/*
 * 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.
 */

// TODO: Change everything to ems for scaling where it makes sense.

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

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

import checkImage from './icon-check.svg'
import indeterminateImage from './indeterminate.svg'

export const StyledInputForSwitcher = styled.input`
  display: none;
`

export const SwitcherContainer = styled.span<{ disabled?: boolean }>`
  display: flex;
  align-items: center;
  justify-content: space-between;
  // @ts-ignore
  color: ${ifProp('disabled', colorGet(ColorsFields.ControlNeutral), 'inherit')};
`

export const Switcher = styled.div<{ isChecked?: boolean; disabled?: boolean }>`
  width: 48px;
  min-width: 48px;
  height: 28px;
  box-sizing: content-box;
  border-radius: 28px;
  display: flex;
  align-items: center;
  padding: 0 2px 0 2px;
  // @ts-ignore
  background: ${ifProp(
    'isChecked',
    colorGet(ColorsFields.ControlActive),
    colorGet(ColorsFields.ControlNeutral),
  )};
  // @ts-ignore
  opacity: ${ifProp('disabled', '0.5', 'initial')};
  transition: 0.3s background;
  cursor: pointer;
`

export const SwitcherDot = styled.div<{ isChecked?: boolean }>`
  position: relative;
  width: 24px;
  height: 24px;
  // @ts-ignore

  left: ${ifProp('isChecked', '24px', '0px')};
  border-radius: 24px;
  background: #fff;
  transition: 0.3s left;
`

export const StyledInputForCheckbox = styled.input<{ indeterminate?: boolean }>`
  display: none;

  & + span {
    min-height: 13px;
    display: flex;
    align-items: center;

    &:before {
      content: '';
      background-size: contain;
      position: relative;
      margin-right: 16px;
      width: 16px;
      height: 16px;
      box-sizing: border-box;
      border-radius: 3px;
      border: 2px solid ${colorGet(ColorsFields.ControlNeutral)};
      transition: all 0.2s ease;
    }
  }

  &:checked + span:before {
    background-color: ${colorGet(ColorsFields.ControlActive)};
    background-image: url(${checkImage});
    border-color: ${colorGet(ColorsFields.ControlActive)};
  }

  ${({ indeterminate }) =>
    indeterminate &&
    css`
      & + span:before,
      &:checked + span:before {
        background-color: ${colorGet(ColorsFields.ControlActive)};
        background-image: url(${indeterminateImage});
        border-color: ${colorGet(ColorsFields.ControlActive)};
      }
    `};

  &:disabled + span {
    color: ${colorGet(ColorsFields.ControlNeutral)};
  }

  &:disabled:checked + span:before {
    background-color: ${colorGet(ColorsFields.ControlNeutral)};
    border-color: ${colorGet(ColorsFields.ControlNeutral)};
  }
`