// This file is part of Coog. The COPYRIGHT file at the top level of
// this repository contains the full copyright notices and license terms.

import React from 'react';
import { faHome } from '@fortawesome/free-solid-svg-icons';

import Button from './Button';
import { ButtonProps } from './Button.types';

export default {
  title: 'Button',
  parameters: {
    actions: {
      handles: ['mouseover', 'click button'],
    },
    component: Button,
  },
  argTypes: {
    type: {
      control: {
        type: 'select',
        options: ['warning', 'error', 'primary', 'default', 'disabled', 'orange', 'green', 'purple'],
      },
    },
  },
};

export const ButtonWarning = (args: ButtonProps): JSX.Element => {
  const { id, label, type, disabled } = args;
  const eventEmitter = (ref: number) => console.log(`eventEmitter::${ref}`);

  return <Button id={id} label={label} type={type} disabled={disabled} eventEmitter={eventEmitter} />;
};

ButtonWarning.args = { id: 0, label: 'Btn Warning', type: 'warning', disabled: false };

export const ButtonError = (args: ButtonProps): JSX.Element => {
  const { id, label, type, disabled } = args;
  const eventEmitter = (ref: number) => console.log(`eventEmitter::${ref}`);

  return <Button id={id} label={label} type={type} disabled={disabled} eventEmitter={eventEmitter} />;
};

ButtonError.args = { id: 1, label: 'Btn Error', type: 'error', disabled: false };

export const ButtonPrimary = (args: ButtonProps): JSX.Element => {
  const { id, label, type, disabled } = args;
  const eventEmitter = (ref: number) => console.log(`eventEmitter::${ref}`);

  return <Button id={id} label={label} type={type} disabled={disabled} eventEmitter={eventEmitter} />;
};

ButtonPrimary.args = { id: 2, label: 'Btn Primary', type: 'primary', disabled: false };

export const ButtonDefault = (args: ButtonProps): JSX.Element => {
  const { id, label, type, disabled } = args;
  const eventEmitter = (ref: number) => console.log(`eventEmitter::${ref}`);

  return <Button id={id} label={label} type={type} disabled={disabled} eventEmitter={eventEmitter} />;
};

ButtonDefault.args = { id: 3, label: 'Btn Default', type: 'default', disabled: false };

export const ButtonDisabled = (args: ButtonProps): JSX.Element => {
  const { id, label, type, disabled } = args;
  const eventEmitter = (ref: number) => console.log(`eventEmitter::${ref}`);

  return <Button id={id} label={label} type={type} disabled={disabled} eventEmitter={eventEmitter} />;
};

ButtonDisabled.args = { id: 4, label: 'Btn Disabled', type: 'default', disabled: true };

interface argsButtons {
  buttons: Array<ButtonProps>;
}

export const ButtonsList = (args: argsButtons): JSX.Element => {
  const { buttons } = args;
  const eventEmitter = (ref: number) => console.log(`eventEmitter::${ref}`);

  return (
    <div style={{ width: '200px' }}>
      {buttons.map(({ id, label, type, width, disabled, theme }) => (
        <Button
          key={id}
          id={id}
          theme={theme}
          label={label}
          type={type}
          disabled={disabled}
          width={width}
          eventEmitter={eventEmitter}
        />
      ))}
    </div>
  );
};

ButtonsList.args = {
  buttons: [
    { id: 0, label: 'Btn 100%', type: 'primary', width: '100%', disabled: false },
    { id: 1, label: 'Btn 20%', type: 'primary', width: '20%', disabled: false, theme: 'red' },
    { id: 2, label: 'Btn default', type: 'primary', disabled: false, theme: 'red-solid' },
    { id: 3, label: 'Btn 136px', type: 'primary', width: '136px', disabled: false, theme: 'blue-solid' },
  ],
};

export const ButtonIcon = (args: ButtonProps): JSX.Element => {
  const { id, label, type, width, disabled, icon } = args;
  const eventEmitter = (ref: number) => console.log(`eventEmitter::${ref}`);

  return (
    <Button
      id={id}
      label={label}
      type={type}
      disabled={disabled}
      width={width}
      icon={icon}
      eventEmitter={eventEmitter}
    />
  );
};

ButtonIcon.args = { id: 5, label: 'Btn Icon', type: 'default', width: '200px', disabled: false, icon: faHome };

export const ButtonLoading = (args: ButtonProps): JSX.Element => {
  const { id, label, type, width, disabled, loading } = args;
  const eventEmitter = (ref: number) => console.log(`eventEmitter::${ref}`);

  return (
    <Button
      id={id}
      label={label}
      type={type}
      disabled={disabled}
      width={width}
      eventEmitter={eventEmitter}
      loading={loading}
    />
  );
};

ButtonLoading.args = { id: 6, label: 'Btn Loading', type: 'default', width: '200px', disabled: false, loading: true };

export const ButtonDisabledIconLoading = (args: ButtonProps): JSX.Element => {
  const { id, label, type, width, disabled, loading, loadingIcon } = args;
  const eventEmitter = (ref: number) => console.log(`eventEmitter::${ref}`);

  return (
    <Button
      id={id}
      label={label}
      type={type}
      disabled={disabled}
      width={width}
      eventEmitter={eventEmitter}
      loading={loading}
      loadingIcon={loadingIcon}
    />
  );
};

ButtonDisabledIconLoading.args = {
  id: 7,
  label: 'Btn Disabled Icon Loading',
  type: 'default',
  width: '200px',
  disabled: true,
  loading: true,
  loadingIcon: faHome,
};

export const ButtonSecondary = (args: ButtonProps): JSX.Element => {
  const { id, label, type, disabled } = args;
  const eventEmitter = (ref: number) => console.log(`eventEmitter::${ref}`);

  return <Button id={id} label={label} type={type} disabled={disabled} eventEmitter={eventEmitter} />;
};

ButtonSecondary.args = { id: 2, label: 'Btn Secondary', type: 'secondary', disabled: false };