import { Button } from '@mui/material';
import { type Meta, type StoryObj } from '@storybook/react-vite';

import useGetDemoFile from '../../../hooks/useGetDemoFile';
import { useModal } from '../../../hooks/useModal';

import CroppingModal from '.';

const meta: Meta<typeof CroppingModal> = {
  component: CroppingModal,
  title: 'Composed Components/CroppingModal',
  tags: ['autodocs'],
  argTypes: {
    file: {
      name: 'file',
      description: 'Upload an image from your computer',
      defaultValue: null,
      control: {
        type: 'file',
        accept: ['.png', '.jpg'],
      },
    },
  },
  args: {
    title: 'Crop Image',
    saveLabel: 'Save',
    cancelLabel: 'Cancel',
    recommendedWidth: 900,
    recommendedHeight: 400,
    onSave: () => alert('Image cropped'),
    onClose: () => alert('Canceled'),
  },
};

export default meta;

type Story = StoryObj<typeof CroppingModal>;

export const Default: Story = {
  render: args => {
    const file = useGetDemoFile(args.file);

    if (!file) return <div>Loading default image...</div>;

    return (
      <CroppingModal
        {...args}
        file={file}
      />
    );
  },
};

export const Round: Story = {
  args: {
    round: true,
    recommendedWidth: 600,
    recommendedHeight: 600,
    title: 'Crop Profile Picture',
  },
  render: args => {
    const file = useGetDemoFile(args.file);

    if (!file) return <div>Loading default image...</div>;

    return (
      <CroppingModal
        {...args}
        file={file}
      />
    );
  },
};

export const WithModal: Story = {
  render: args => {
    const file = useGetDemoFile(args.file);

    const { modal: croppingModal, showModal: showCroppingModal } = useModal(
      CroppingModal,
      { fullWidth: true, maxWidth: 'md' },
      {
        ...args,
        file: file!,
      },
    );

    return (
      <>
        <Button
          variant="secondary"
          onClick={() => showCroppingModal(args)}
        >
          Open Cropping Modal
        </Button>
        {croppingModal}
      </>
    );
  },
};