import { useState } from 'react';
import { FormProvider, useForm } from 'react-hook-form';

import { type Meta, type StoryObj } from '@storybook/react-vite';
import { IconInfoCircle } from '@tabler/icons-react';

import Tooltip from '../Tooltip';

import FormSwitcher from './form';
import Switcher from '.';

const meta: Meta<typeof Switcher> = {
  component: Switcher,
  title: 'Design System/Switches/Switcher',
  tags: ['autodocs'],
  parameters: {
    docs: {
      source: {
        type: 'dynamic',
      },
    },
  },
};

export default meta;

type Story = StoryObj<typeof Switcher>;

const exampleTitle = 'Chocolate';
const exampleDescription = 'Toggle if you like chocolate';

export const Default: Story = {
  args: {
    title: exampleTitle,
    description: exampleDescription,
  },

  render: () => {
    const [value, setValue] = useState(false);
    return (
      <Switcher
        title={exampleTitle}
        description={exampleDescription}
        value={value}
        onChange={() => setValue(!value)}
      />
    );
  },
};

export const NoTitle: Story = {
  render: () => {
    const [value, setValue] = useState(false);
    return (
      <Switcher
        value={value}
        onChange={() => setValue(!value)}
      />
    );
  },
};

export const Disabled: Story = {
  args: {
    title: exampleTitle,
    description: exampleDescription,
    disabled: true,
  },
};

export const Checked: Story = {
  args: {
    title: exampleTitle,
    description: exampleDescription,
    value: true,
  },
};

export const WithIcon: Story = {
  args: {
    title: exampleTitle,
    value: true,
    Icon: (
      <Tooltip title="I can give extra information this way!">
        <IconInfoCircle size={20} />
      </Tooltip>
    ),
  },
};

export const WithMessageOnDisabled: Story = {
  args: {
    title: exampleTitle,
    value: true,
    disabled: true,
    disabledTooltip: {
      direction: 'bottom',
      description: 'This is a disabled message',
    },
  },
};

export const FormSwitcherStory: Story = {
  render: () => {
    const form = useForm({
      defaultValues: {
        mySwitch1: false,
        mySwitch2: true,
      },
    });
    return (
      <FormProvider {...form}>
        <FormSwitcher
          name="mySwitch1"
          switcherProps={{
            title: 'My title 1',
            description: 'My description 1',
          }}
        />
        <FormSwitcher
          name="mySwitch2"
          switcherProps={{
            title: 'My title 2',
            description: 'My description 2',
          }}
        />
      </FormProvider>
    );
  },
};

export const CustomTitleAndDescription: Story = {
  args: {
    title: exampleTitle,
    value: true,
    description: exampleDescription,
    titleProps: {
      variant: 'globalM',
      fontWeight: 'fontWeightSemiBold',
      color: 'rgb(51, 79, 179)',
    },
    descriptionProps: {
      variant: 'globalXS',
      fontWeight: 'fontWeightSemiBold',
      color: 'lightBlue',
    },
    Icon: (
      <Tooltip title="I can give extra information this way!">
        <IconInfoCircle size={20} />
      </Tooltip>
    ),
  },
};