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

import {
  type ConditionLineValues,
  type DefaultItemType,
} from '@composed-components/ConditionLine/types';
import FormWrapper from '@composed-components/storybook/FormWrapper';
import { type Meta, type StoryObj } from '@storybook/react';

import { emptyCondition } from './constants';
import FormConditionGroup from './form';
import { conditionLineSlotProps, fieldItems } from './mocks';
import { type ConditionGroupValues } from './types';
import ConditionGroup from './index';

const meta: Meta<typeof ConditionGroup> = {
  title: 'Composed Components/ConditionGroup',
  component: ConditionGroup,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
  argTypes: {
    value: {
      description:
        'Current array of condition line values. Each item represents a single condition with joinOperator, field, conditionOperator, and value.',
      control: 'object',
      table: {
        type: { summary: 'ConditionGroupValues<FieldItemType, ValueItemType>' },
      },
    },
    onChange: {
      description:
        'Callback fired when any condition changes (add, delete, or edit). Receives the full updated conditions array.',
      table: {
        type: { summary: '(values: ConditionGroupValues) => void' },
      },
    },
    onAdd: {
      description:
        'Callback fired when the "add condition" button is clicked, before the new condition is appended.',
      table: {
        type: { summary: '() => void' },
      },
    },
    onDelete: {
      description:
        'Callback fired when a condition line is deleted. Receives the removed condition and its index.',
      table: {
        type: {
          summary: '(field: ConditionLineValues, index: number) => void',
        },
      },
    },
    disabled: {
      description: 'If true, disables every condition line and the add button.',
      control: 'boolean',
      table: {
        defaultValue: { summary: 'false' },
        type: { summary: 'boolean' },
      },
    },
    slotProps: {
      description:
        'Override props for internal sub-components: root (CardContainer), conditionLine (shared ConditionLine props), and addButton (Button).',
      control: 'object',
      table: {
        type: { summary: 'ConditionGroupSlotProps' },
      },
    },
  },
};

export default meta;
type Story = StoryObj<typeof meta>;

const StoryWrapper = ({ children }: { children: React.ReactNode }) => (
  <div style={{ width: '900px', padding: '20px' }}>{children}</div>
);

export const Default: Story = {
  render: () => {
    const [conditions, setConditions] = useState<
      ConditionGroupValues<DefaultItemType, DefaultItemType>
    >([emptyCondition]);

    return (
      <StoryWrapper>
        <ConditionGroup
          value={conditions}
          onChange={setConditions}
          onAdd={() => console.log('Condition added')}
          onDelete={(
            condition: ConditionLineValues<DefaultItemType, DefaultItemType>,
            index: number,
          ) => console.log('Condition deleted:', index, condition)}
          slotProps={{
            conditionLine: {
              fieldSelectorItems: fieldItems,
              valueSelectorItems: [],
              slotProps: conditionLineSlotProps,
            },
          }}
        />
      </StoryWrapper>
    );
  },
};

const ConditionGroupForm = () => {
  const form = useForm<{
    conditions: ConditionLineValues<DefaultItemType, DefaultItemType>[];
  }>({
    defaultValues: {
      conditions: [emptyCondition],
    },
  });

  return (
    <FormWrapper form={form}>
      <FormConditionGroup
        name="conditions"
        inputProps={{
          onAdd: () => console.log('Condition added'),
          onDelete: (condition, index) =>
            console.log('Condition deleted:', index, condition),
          slotProps: {
            conditionLine: {
              fieldSelectorItems: fieldItems,
              valueSelectorItems: [],
              slotProps: conditionLineSlotProps,
            },
          },
        }}
      />
    </FormWrapper>
  );
};

export const WithForm: Story = {
  render: () => (
    <StoryWrapper>
      <ConditionGroupForm />
    </StoryWrapper>
  ),
};