import React, { useState } from 'react';
import { StoryObj, Meta } from '@storybook/react';
import Popup from './Popup';
import Button from '../Button';

const meta: Meta<typeof Popup> = {
  title: 'Components/Popup',
  component: Popup,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
};

type Story = StoryObj<typeof Popup>;

const defaultArgs = {
  isOpen: false,
  type: 'info',
  headerTitle: 'Popup Header',
  continueButtonLabel: 'Continue',
  cancelButtonLabel: 'Cancel',
  continueButtonDisable: false,
  cancelButtonDisable: false,
  onContinueClick: () => {},
  onCancelClick: () => {},
};
export const Controlled: Story = {
  args: {
    ...defaultArgs,
    isOpen: true,
    type: 'warning',
    headerTitle: 'Warning',
    headerText: 'Delete',
    continueButtonLabel: 'Delete',
    cancelButtonLabel: 'Cancel',
    continueButtonDisable: true,
    cancelButtonDisable: false,
  },
  render: () => {
    const [open, setOpen] = useState(false);

    return (
      <>
        <Button
          variant="primary"
          label="open popup"
          onClick={() => setOpen(true)}
          disabled={false}
        />
        <Popup
          {...defaultArgs}
          isOpen={open}
          type="warning"
          headerTitle="Warning!"
          headerText="Delete"
          continueButtonLabel="Delete"
          cancelButtonLabel="Cancel"
          continueButtonDisable={true}
          cancelButtonDisable={false}
          onContinueClick={() => setOpen(false)}
          onCancelClick={() => {
            setOpen(false);
          }}
          children={
            <>
              <div>
                <span>Hi User,</span>
              </div>
              <div>
                <span>
                  Are you sure you want to delete client machine TYSS-TY?
                </span>
              </div>
              <div>
                <span>How do you want to proceed?</span>
              </div>
            </>
          }
        />
      </>
    );
  },
};

export const ControlledInfoTypePopup: Story = {
  args: {
    ...defaultArgs,
    isOpen: true,
    type: 'info',
    headerTitle: 'Information',
    headerText: 'Data loss',
    continueButtonLabel: 'Continue',
    cancelButtonLabel: 'Cancel',
    continueButtonDisable: true,
    cancelButtonDisable: false,
  },
  render: () => {
    const [open, setOpen] = useState(false);

    return (
      <>
        <Button
          variant="primary"
          label="open info type popup"
          onClick={() => setOpen(true)}
          disabled={false}
        />
        <Popup
          {...defaultArgs}
          isOpen={open}
          type="info"
          headerTitle="Information!"
          headerText="Data loss"
          continueButtonLabel="Continue"
          cancelButtonLabel="Cancel"
          continueButtonDisable={true}
          cancelButtonDisable={false}
          onContinueClick={() => setOpen(false)}
          onCancelClick={() => {
            setOpen(false);
          }}
          children={
            <>
              <div>
                <span>Hi User,</span>
              </div>
              <div>
                <span>
                  Your data will be lost. Are you sure you want to discard the
                  changes?
                </span>
              </div>
              <div>
                <span>How do you want to proceed?</span>
              </div>
            </>
          }
        />
      </>
    );
  },
};
export default meta;