import * as React from 'react';

import Button from './Button.styled';
import { Loading, Colors, Icons } from '../index';

export interface IProps {
  isType?: string;
  children: React.ReactNode;
  onClick?: () => any;
  css?: string;
  small?: boolean;
  loading?: boolean;
  response?: string | null;
  disabled?: boolean;
  type: 'button' | 'submit' | 'reset';
  role?: string;
  last?: boolean;
}

const renderButtonAndHover = (isType?: string, children?: React.ReactNode|React.ReactChild|string, response?: string|null) => {

  const mapElements = new Map();
  mapElements
  .set('forward', (
    <React.Fragment>
      {children}
      <Icons.SecondaryArrow color={Colors.white} width={30} height={20} />
    </React.Fragment>
  ))
  .set('disabled-forward', (
    <React.Fragment>
      {children}
      <Icons.SecondaryArrow color={Colors.white} width={30} height={20} />
    </React.Fragment>
  ))
  .set('backward', (
    <React.Fragment>
      <Icons.SecondaryArrow color={Colors.white} degree={180} width={30} height={20} />
      {children}
    </React.Fragment>
  ))
  .set('readmore', (
    <React.Fragment>
      {children}
      <svg className='svg down' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 20.4'>
        <polyline className='switch-arrow-elements one' points='0.8,19.7 10.4,10.2 0.8,0.7 ' />
        <polyline className='switch-arrow-elements two' points='0.8,19.7 10.4,10.2 0.8,0.7 ' />
      </svg>
    </React.Fragment>
  ))
  .set('confirm', children)
  .set('outline', children)
  .set('click', children)
  .set('link', children)
  .set('disabled', children);

  if (!response) {
    return mapElements.get(isType) || children;
  }

  return response === 'success' ? <Icons.Success /> : 'Tente de novo';
};

export default ({ children, isType, loading, response, ...props }: IProps) => (
  <Button isType={isType} response={response} loading={loading} {...props}>
    {!loading ? renderButtonAndHover(isType, children, response) : (
      <React.Fragment>
        <Loading />&nbsp;
      </React.Fragment>
    )}
  </Button>
);