import React from 'react';
import {Button, ButtonLink, NextButtonDesktop, BackButtonDesktop, NextButtonMobile, ExitButtonDesktop, ContinueButtonDesktop} from './button_intake.styles';
import {GrFormPrevious} from 'react-icons/gr';
import { MdHighlightOff } from "react-icons/md";


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 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 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 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>
  </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>
  </NextButtonDesktop>
);

export const BackButton: React.FC<ButtonProps> = ({children, disabled, onClick}) => (
  <Button disabled={disabled} onClick={onClick} >
    <GrFormPrevious size="20px" className='GrFormPrevious'/>

    <span className="button-text" style={{padding: '10px 10px 10px 2px'}}>
      {children}
    </span>
  </Button>
);

export const BackButtonLgScreen: React.FC<ButtonProps> = ({children, disabled, onClick}) => (
  <BackButtonDesktop disabled={disabled} onClick={onClick} >
    <GrFormPrevious size="20px" className='GrFormPrevious'/>

    <span className="button-text" style={{padding: '10px 10px 10px 2px'}}>
      {children}
    </span>
  </BackButtonDesktop>
);

export const ExitButton: React.FC<ButtonProps> = ({children, disabled, onClick, clickLabel}) => (
  <ExitButtonDesktop disabled={disabled} onClick={onClick} data-click-category="call-to-action" data-click-action={children} data-click-label={clickLabel || "#"}>
    <MdHighlightOff size="20px" className='MdHighlightOff'/>
    <span>{children}</span>
  </ExitButtonDesktop>
);

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

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

export const UtilityButtonLight: React.FC<ButtonProps> = ({children, disabled, onClick}) => (
  <Button 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>
);