import { useState } from 'react';

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

import { mockDefault, mockImage } from './mocks';
import useCoverPictureDrawer from '.';

const meta: Meta = {
  title: 'Hooks/useCoverPictureDrawer',
  tags: ['autodocs'],
  parameters: {
    docs: {
      description: {
        component: 'Custom hook to open a drawer with a cover picture uploader',
      },
    },
  },
};

export default meta;

type Story = StoryObj<typeof meta>;

export const Default: Story = {
  render: () => {
    const [coverPicture, setCoverPicture] = useState<string>();
    const {
      coverPictureDrawer,
      showCoverPictureDrawer,
      closeCoverPictureDrawer,
    } = useCoverPictureDrawer({ defaultSrc: coverPicture });

    const handleOpen = () => {
      showCoverPictureDrawer({
        defaultSrc: mockImage,
        onConfirm: values => {
          closeCoverPictureDrawer();

          const { cropped } = values.coverPicture;
          if (!cropped) return setCoverPicture(undefined);

          setCoverPicture(
            typeof cropped === 'string'
              ? cropped
              : URL.createObjectURL(cropped),
          );
        },
      });
    };

    return (
      <Stack gap={2}>
        {coverPicture && <Image src={coverPicture} />}
        <Button
          variant="primary"
          onClick={handleOpen}
        >
          Open
        </Button>
        {coverPictureDrawer}
      </Stack>
    );
  },
  parameters: {
    docs: {
      description: {
        story: 'Basic usage',
      },
    },
  },
};

export const Loading: Story = {
  render: () => {
    const [loading, setLoading] = useState<boolean>(false);
    const [coverPicture, setCoverPicture] = useState<string | undefined>(
      mockDefault,
    );
    const { coverPictureDrawer, showCoverPictureDrawer } =
      useCoverPictureDrawer({ defaultSrc: coverPicture, loading });

    const handleOpen = () => {
      showCoverPictureDrawer({
        defaultSrc: mockImage,
        onConfirm: values => {
          setLoading(true);

          const { cropped } = values.coverPicture;
          if (!cropped) return setCoverPicture(undefined);

          setCoverPicture(
            typeof cropped === 'string'
              ? cropped
              : URL.createObjectURL(cropped),
          );
        },
      });
    };

    return (
      <Stack gap={2}>
        {coverPicture && <Image src={coverPicture} />}
        <Button
          variant="primary"
          onClick={handleOpen}
        >
          Open
        </Button>
        {coverPictureDrawer}
      </Stack>
    );
  },
  parameters: {
    docs: {
      description: {
        story: 'With loading state',
      },
    },
  },
};

export const WithDefault: Story = {
  render: () => {
    const [coverPicture, setCoverPicture] = useState<string | undefined>(
      mockDefault,
    );
    const {
      coverPictureDrawer,
      showCoverPictureDrawer,
      closeCoverPictureDrawer,
    } = useCoverPictureDrawer({ defaultSrc: coverPicture });

    const handleOpen = () => {
      showCoverPictureDrawer({
        defaultSrc: mockImage,
        onConfirm: values => {
          closeCoverPictureDrawer();

          const { cropped } = values.coverPicture;
          if (!cropped) return setCoverPicture(undefined);

          setCoverPicture(
            typeof cropped === 'string'
              ? cropped
              : URL.createObjectURL(cropped),
          );
        },
      });
    };

    return (
      <Stack gap={2}>
        {coverPicture && <Image src={coverPicture} />}
        <Button
          variant="primary"
          onClick={handleOpen}
        >
          Open
        </Button>
        {coverPictureDrawer}
      </Stack>
    );
  },
  parameters: {
    docs: {
      description: {
        story: 'With default image',
      },
    },
  },
};