import type { Meta, StoryObj } from '@storybook/react';

import { Dialog, showDialog, showWarning, showConfirm, showInfo, showError } from '.';
import { ActionMenu } from '../action-menu';
import { Button } from '../button';

const meta: Meta<typeof Dialog> = {
  title: 'Components/Dialog',
  component: Dialog,
  argTypes: {},
};

export default meta;

type Story = StoryObj<typeof Dialog>;

const Lorem = () => (
  <p style={{ lineHeight: '1.5rem' }}>
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reiciendis neque id, blanditiis exercitationem doloremque
    quam ab minima architecto culpa.
  </p>
);

export const Component: Story = {
  render: () => (
    <Dialog>
      <Dialog.Trigger asChild>
        <Button>Open dialog</Button>
      </Dialog.Trigger>
      <Dialog.Content>
        <Dialog.Title>This is a normal Dialog</Dialog.Title>
        <Dialog.Description>That is described in a declarative way</Dialog.Description>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          Here will go the main content
          <ActionMenu>
            <ActionMenu.Item onSelect={() => console.warn('Download')}>Download</ActionMenu.Item>
            <ActionMenu.Item className="danger" onSelect={() => console.warn('Delete')}>
              Delete
            </ActionMenu.Item>
          </ActionMenu>
        </div>
      </Dialog.Content>
    </Dialog>
  ),
};

export const ComponentWithDangerAction: Story = {
  name: 'With danger action',
  render: () => (
    <Dialog>
      <Dialog.Trigger asChild>
        <Button>Open dialog</Button>
      </Dialog.Trigger>
      <Dialog.Content>
        <Dialog.Title>A Dialog</Dialog.Title>
        <div>
          <Dialog.Description>
            <Lorem />
          </Dialog.Description>

          <div style={{ display: 'flex', marginTop: '2rem', gap: '1rem', justifyContent: 'flex-end' }}>
            <Button>Cancel</Button>
            <Button intent="danger">Delete</Button>
          </div>
        </div>
      </Dialog.Content>
    </Dialog>
  ),
};

export const ShowConfirm: Story = {
  name: 'Show confirm',
  render: () => {
    const handleClick = () => {
      showConfirm({
        title: 'We need your confirmation',
        description: 'In order to proceed to you account we need your confirmation',
        content: (
          <p style={{ marginTop: '1.5rem', marginBottom: '1.5rem' }}>
            We really like cookies and our cookies is what allow us to provide you with an awesome user experience. Do
            you allow us to set some cookies for you?
          </p>
        ),
        okText: 'Yes sure',
        cancelText: `I don't really like cookies`,
        onCancel() {
          console.warn('you canceled');
        },
        onOk() {
          console.warn('you confirmed');
        },
      });
    };

    return <Button onClick={handleClick}>showConfirm</Button>;
  },
};

export const ShowWarning: Story = {
  name: 'Show warning',
  render: () => {
    const handleClick = () => {
      showWarning({
        title: 'A warning',
        description: 'This is a warning dialog',
        content: <Lorem />,
        okText: `That's OK`,
        onOk() {
          console.warn('ok');
        },
      });
    };

    return <Button onClick={handleClick}>showWarning</Button>;
  },
};

export const ShowError: Story = {
  name: 'Show error',
  render: () => {
    const handleClick = () => {
      showError({
        title: 'Error',
        description: 'This is an error dialog',
        content: <Lorem />,
        okText: `That's not good`,
        onOk() {
          console.warn('ok');
        },
      });
    };

    return <Button onClick={handleClick}>showError</Button>;
  },
};

export const ShowInfo: Story = {
  name: 'Show info',
  render: () => {
    const handleClick = () => {
      showInfo({
        title: 'Information',
        description: 'This is an informative dialog',
        content: <Lorem />,
        okText: `I'm fine with that`,
        onOk() {
          console.warn('ok');
        },
      });
    };

    return <Button onClick={handleClick}>showInfo</Button>;
  },
};

export const ShowDialog: Story = {
  name: 'Show dialog',
  render: () => {
    const handleClick = () => {
      showDialog({
        title: 'Just to let you know',
        content: <Lorem />,
      });
    };

    return <Button onClick={handleClick}>showDialog</Button>;
  },
};
