import React from 'react';
import {Button, ButtonLink, NextButtonDesktop, BackButtonDesktop, NextButtonMobile} from './button.styles';
import {GrPlayFill} from 'react-icons/gr';

type ButtonProps = {
  disabled?: boolean;
  onClick?: any;
  children?: React.ReactNode;
  href?: string;
  width?: number;
  clickCategory?: string;
  clickAction?: string;
  clickLabel?: string;
};

export const PrimaryButtonDark: React.FC<ButtonProps> = ({children, disabled, onClick, clickLabel}) => (
  <Button dark="true" size="large" disabled={disabled} onClick={onClick} data-click-category="call-to-action" data-click-action={children} data-click-label={clickLabel || "#"}>
    <span className="button-text">{children}</span>
  </Button>
);

export const PrimaryButtonDarkLink: React.FC<ButtonProps> = ({children, disabled, href, onClick, clickLabel}) => (
  <ButtonLink dark="true" size="large" disabled={disabled} href={href} onClick={onClick} data-click-category="call-to-action" data-click-action={children} data-click-label={clickLabel || href || children}>
    <span className="button-text">{children}</span>
  </ButtonLink>
);

export const PrimaryButtonLight: React.FC<ButtonProps> = ({children, disabled, onClick}) => (
  <Button light="true" size="large" disabled={disabled} onClick={onClick}>
    <span className="button-text">{children}</span>
  </Button>
);

export const PrimaryButtonLightLink: React.FC<ButtonProps> = ({children, disabled, href, onClick}) => (
  <ButtonLink light="true" size="large" disabled={disabled} href={href} onClick={onClick} data-click-category="call-to-action" data-click-action={children} data-click-label={href || children}>
    <span className="button-text">{children}</span>
  </ButtonLink>
);

export const SecondaryButton: React.FC<ButtonProps> = ({children, disabled, onClick}) => (
  <Button size="large" disabled={disabled} onClick={onClick}>
    <span className="button-text">{children}</span>
  </Button>
);

export const NextButton: React.FC<ButtonProps> = ({children, disabled, onClick}) => (
  <NextButtonMobile size="large" disabled={disabled} onClick={onClick} white>
    <span className="button-text" style={{padding: '10px'}}>
      {children}
    </span>
    <GrPlayFill size="20px" />
  </NextButtonMobile>
);

export const NextButtonLgScreen: React.FC<ButtonProps> = ({children, disabled, onClick}) => (
  <NextButtonDesktop size="large" disabled={disabled} onClick={onClick} white>
    <span className="button-text" style={{padding: '10px'}}>
      {children}
    </span>
    <GrPlayFill size="20px" />
  </NextButtonDesktop>
);

export const BackButton: React.FC<ButtonProps> = ({children, disabled, onClick}) => (
  <Button size="large" disabled={disabled} onClick={onClick} white>
    <GrPlayFill size="20px" style={{transform: `rotateY(180deg)`}} />
    <span className="button-text" style={{padding: '10px'}}>
      {children}
    </span>
  </Button>
);

export const BackButtonLgScreen: React.FC<ButtonProps> = ({children, disabled, onClick}) => (
  <BackButtonDesktop size="large" disabled={disabled} onClick={onClick} white>
    <GrPlayFill size="20px" style={{transform: `rotateY(180deg)`}} />
    <span className="button-text" style={{padding: '10px'}}>
      {children}
    </span>
  </BackButtonDesktop>
);

export const UtilityButtonDark: React.FC<ButtonProps> = ({children, disabled, onClick}) => (
  <Button dark="true" disabled={disabled} onClick={onClick}>
    <span className="button-text">{children}</span>
  </Button>
);

export const UtilityButtonLight: React.FC<ButtonProps> = ({children, disabled, onClick}) => (
  <Button light="true" disabled={disabled} onClick={onClick}>
    <span className="button-text">{children}</span>
  </Button>
);

export const UtilityButton: React.FC<ButtonProps> = ({children, disabled, onClick, clickCategory, clickAction, clickLabel}) => (
  <Button disabled={disabled} onClick={onClick} data-click-category={clickCategory} data-click-action={clickAction} data-click-label={clickLabel}>
    <span className="button-text">{children}</span>
  </Button>
);