import styled from 'styled-components';

import { Colors, TextHelper, Sizes } from '../index';
import { IProps } from './Button';

import * as buttonOptions from './buttonOptions';
const {
  link, buttonPropertiesDefault, forward, disabledForward, backward,
  readmore, defaultButton, outline, btnWhite, smallProperties, responseModule,
} = buttonOptions;

const Svg = `
  & svg {
    position: relative;
    top: 2px;
    height: 16px;
    margin-left: 6px;
    fill:none;
    stroke: ${Colors.white};
    stroke-miterlimit: 10;
    stroke-width: 2px;
    transition: transform 0.15s ease-in-out;
  }

  .link-arrow-elements { transition: stroke 0.15s ease-in-out, transform 0.15s ease-in-out; }
  .switch-arrow-elements { transition: all 0.15s; }
`;

const Button = styled.button<IProps>`
  ${({ isType }) => isType !== 'link' ? buttonPropertiesDefault(Colors) : link(Colors)}
  cursor: pointer;
  text-transform: uppercase;
  border: 0 none;
  font-family: ${TextHelper.fontVariant('medium')};

  ${({ isType }) => isType === 'forward' && forward(Colors)(Svg)}

  ${({ isType }) => isType === 'disabled-forward' && disabledForward(Colors)(Svg)}

  ${({ isType }) => isType === 'backward' && backward(Colors)(Svg)}

  ${({ isType }) => isType === 'readmore' && readmore(Colors)(Svg)}

  ${({ isType }) => (isType === 'confirm' || isType === 'click') && defaultButton(Colors)}

  ${({ isType }) => isType === 'outline' && outline(Colors)(defaultButton(Colors))}

  ${({ isType }) => isType === 'btn-white' && btnWhite(Colors)}

  ${({ small }) => small && smallProperties}

  ${({ response }) => response === 'success' && responseModule.success(Colors)}

  ${({ response }) => response === 'fail' && responseModule.fail(Colors)}

  ${({ last }) => last && `margin-bottom: ${Sizes.s4}px;`}

  ${({ loading }) => loading && `position: relative`};
`;

export default Button;