/*
 * 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 from 'styled-components'
import * as _ from 'lodash'
import {
  FontFacesFields,
  ShadowsFields,
  FontSizesFields,
  ThemeFields,
  ColorVariants,
  ColorsFields,
  PaddingFields,
} from '../../style/themeFields'
import {
  fontSize,
  cssMixin,
  variantsGet,
  fontFamilyGet,
  colorGet,
  fontSizeGet,
  shadowGet,
  paddingGet,
} from '../../style/utils'
import { darken, lighten } from '../../style/helpers'

export const getButtonVariants = (theme: any) => {
  const colors = _.get(theme, ThemeFields.Colors, {})
  return {
    [ColorVariants.Primary]: {
      backgroundColor: colors[ColorsFields.Primary],
      '&:hover': {
        backgroundColor: colors[ColorsFields.PrimaryLighten],
      },
      '&:active': {
        backgroundColor: colors[ColorsFields.PrimaryDarken],
      },
    },
    [ColorVariants.Danger]: {
      backgroundColor: colors[ColorsFields.Danger],
      '&:hover': {
        backgroundColor: colors[ColorsFields.DangerLighten],
      },
      '&:active': {
        backgroundColor: colors[ColorsFields.DangerDarken],
      },
    },
    [ColorVariants.Success]: {
      backgroundColor: colors[ColorsFields.Success],
      '&:hover': {
        backgroundColor: colors[ColorsFields.SuccessLighten],
      },
      '&:active': {
        backgroundColor: colors[ColorsFields.SuccessDarken],
      },
    },
  }
}

export const Button = styled.button`
  padding: ${paddingGet(PaddingFields.ButtonRegular)};
  border-radius: 0.2em;
  outline: none;
  border-width: 0;
  transition: all 0.3s;
  min-width: 6em;
  user-select: none;
  cursor: pointer;
  background-color: ${colorGet(ColorsFields.Button)};
  font-family: ${fontFamilyGet(FontFacesFields.Sans)};
  font-size: ${fontSizeGet(FontSizesFields.Regular)};
  color: ${colorGet(ColorsFields.TextInverted)};
  box-shadow: ${shadowGet(ShadowsFields.Button)};

  &:hover {
    background-color: ${lighten('0.1', colorGet(ColorsFields.Button))};
  }

  &:active {
    border-width: 0;
    background-color: ${darken('0.1', colorGet(ColorsFields.Button))};
  }

  ${fontSize}
  ${variantsGet(getButtonVariants)}
  ${cssMixin()}
`

Button.defaultProps = {
  type: 'button',
}