import React, { FC, useState } from 'react';
import { StoryObj, Meta } from '@storybook/react';
import AUAlertComponent, { Props as AlertProps } from '../src/components/AUAlertComponent';
import { ThemeWrapper } from './lib/helpers';

type Props = {
  confirm: boolean;
  label: string;
  mode: AlertProps['mode'];
  header: string;
  message: string;
  okButtonText: string;
  cancelButtonText: string;
};

const AlertWrapper: FC<Props> = ({
  confirm,
  label,
  mode,
  header,
  message,
  okButtonText,
  cancelButtonText,
}) => {
  const [processing, setProcessing] = useState<boolean>(false);
  const [done, setDone] = useState<boolean>(false);

  return (
    <AUAlertComponent
      modalId="alertModal"
      confirm={confirm}
      label={label}
      mode={mode}
      okMode="ireversable-action"
      header={header}
      message={message}
      okButtonText={okButtonText}
      cancelButtonText={cancelButtonText}
      processing={processing}
      done={done}
      onClick={() => {
        setDone(false);
        setProcessing(true);
        setTimeout(() => {
          setDone(true);
          setProcessing(false);
        }, 2500);
      }}
    />
  );
};

export default {
  title: 'Delphinus/Alert and Confirm',
  component: AlertWrapper,
  argTypes: {
    label: {
      table: {
        disable: true,
      }
    },
    mode: {
      table: {
        disable: true,
      }
    },
    onClick: {
      table: {
        disable: true,
      }
    },
    modalId: {
      table: {
        disable: true,
      }
    },
    confirm: {
      table: {
        disable: true,
      }
    },
    processing: {
      table: {
        disable: true,
      }
    },
    done: {
      table: {
        disable: true,
      }
    },
    cancelButtonText: {
      table: {
        disable: true,
      }
    },
  },
  decorators: [
    (Story, context) => (
      <ThemeWrapper theme={context.globals.theme}>
        {Story()}
      </ThemeWrapper>
    )
  ],
} as Meta<typeof AlertWrapper>;

type Story = StoryObj<typeof AlertWrapper>;

export const Alert: Story = {
  args: {
    confirm: false,
    label: 'Slet',
    mode: 'ireversable-action',
    header: 'Advarsel',
    message: '<p>Den valgte fil vil blive slettet.</p>',
    okButtonText: 'Ok, forstået',
    cancelButtonText: 'Annuller',
  },
  render: (args) => <AlertWrapper {...args} />,
};

export const Confirm: Story = {
  args: {
    confirm: true,
    label: 'Slet',
    mode: 'ireversable-action',
    header: 'Bekræft',
    message: '<p>Er du sikker på, at du vil slette den valgte fil?</p>',
    okButtonText: 'Ja',
    cancelButtonText: 'Annuller',
  },
  render: (args) => <AlertWrapper {...args} />,
};