// @flow
import React from 'react';
import { ThemeProvider } from 'styled-components';
import { renderToString } from 'react-dom/server';
import { getPaletteColor } from '../../../../mixins/branding';
import type { ThemeProps } from '../../../../types';
import { Lock as LockIcon, ErrorIcon, Checkmark } from '../../../icon';
import type { FormInputProps } from './form-input.proptypes';
import type { FontSize } from '../../../../mixins/typography';

const hasError = ({ error }) =>
  error === true || typeof error === 'string' || typeof error === 'object';

export const getInputVerticalPadding = ({
  large,
  fontSize,
}: FormInputProps<string>) => {
  if (fontSize === 'f5') {
    return '15px';
  }

  return large ? '10px' : '2px';
};

export const getInputFontSize = ({
  fontSize,
  large,
}: {
  fontSize?: FontSize,
  large?: boolean,
}) => {
  if (fontSize == null) {
    return large ? 'f3' : 'f1';
  }

  return fontSize;
};

export const getInputBorder = ({ hideBorder }: FormInputProps<string>) =>
  hideBorder ? 'none' : `1px solid`;

export const getInputLeftPadding = ({
  large,
  iconType,
  iconPosition = 'left',
  hideBorder = false,
}: FormInputProps<string>) => {
  if (hideBorder) {
    return '0px';
  }
  if (iconType && iconPosition === 'left') {
    return large ? '60px' : '40px';
  }

  return large ? '30px' : '20px';
};

export const getInputIconPosition = ({
  iconPosition = 'left',
  iconType,
  large,
  ...rest
}: FormInputProps<string>) => {
  let finalIconPosition = iconPosition;

  if (hasError(rest)) {
    finalIconPosition = 'right';
  }

  if (iconType === 'checkmark' && iconPosition === 'right') {
    return `right ${large ? '18px' : '10px'} center`;
  }

  return `${finalIconPosition} center`;
};

export const getDisabledBackgroundColor = (props: FormInputProps<string>) => {
  if (props.hideBorder) {
    return 'transparent';
  }
  return getPaletteColor('background');
};

export const getTextColor = (props: FormInputProps<string>) => {
  if (hasError(props)) {
    return getPaletteColor('error-fg');
  }
  if (props.disabled) {
    return getPaletteColor('greyscale-dark');
  }

  return getPaletteColor('greyscale-black');
};

export const getPlaceholderColor = () => getPaletteColor('greyscale-dark');

const getIcon = (props: {| ...ThemeProps, ...FormInputProps<string> |}) => {
  if (hasError(props)) {
    return <ErrorIcon />;
  }

  switch (props.iconType) {
    case 'error':
      return <ErrorIcon />;
    case 'lock':
      return (
        <LockIcon disabled={props.disabled} hideBorder={props.hideBorder} />
      );
    case 'checkmark':
      return <Checkmark inverted />;

    default:
      return null;
  }
};

export const getIconDataUri = (props: {|
  ...ThemeProps,
  ...FormInputProps<string>,
|}) => {
  if (!props.iconType && !hasError(props)) return undefined;

  const themed = (
    <ThemeProvider theme={props.theme}>{getIcon(props)}</ThemeProvider>
  );

  const encodedIcon = encodeURIComponent(renderToString(themed));
  return `url(data:image/svg+xml;utf8,${encodedIcon})`;
};

export const getStyledButtonPadding = ({ large }: FormInputProps<string>) =>
  large ? '5px' : '2px 5px 5px 5px';
