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

const getLabelVariants = (theme: any) => {
  const colors = _.get(theme, ThemeFields.Colors, {})
  return {
    [ColorVariants.Primary]: {
      color: colors[ColorsFields.Primary],
    },
    [ColorVariants.Danger]: {
      color: colors[ColorsFields.Danger],
    },
    [ColorVariants.Success]: {
      color: colors[ColorsFields.Success],
    },
  }
}

export type LabelProps = {
  css?: ThemedCssFunction<any> | string
  variant?: ColorVariants
}
export const Label = styled.label<LabelProps>`
  font-family: ${fontFamilyGet(FontFacesFields.Sans)};
  font-size: ${fontSizeGet(FontSizesFields.Regular)};
  color: ${colorGet(ColorsFields.Text)};

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