import type { Meta, StoryObj } from '@storybook/react-vite';
import argTypes from '../../../.storybook/sgdsArgTypes';

import Filters from './SearchFilters';
import DatePicker from '../DatePicker';
import Checkbox from '../Checkbox';

const meta = {
    title: 'Components/Search results/Filters/Filter panel',
    component: Filters.Panel,
    decorators: [(Story) => (
        <div className="ds_accordion ds_accordion--small ds_!_margin-top--0">
            <Story />
        </div>
    )],
    argTypes: {
        children: argTypes.children(),
        isScrollable: {
            description: 'Puts internal scrollbars around the filter fields',
            control: 'boolean',
        },
        legend: {
            description: 'Content for the (visually hidden) legend element',
            type: {
                name: 'string',
                required: true
            }
        },
        heading: {
            description: 'Heading of the filter panel item',
            type: {
                name: 'string',
                required: true
            }
        },
        activeFilterCount: {
            description: 'Number of active filter fields in this panel',
            type: {
                name: 'number'
            }
        }
    },
    args: {
        heading: 'Filter',
        legend: 'Select which publication types you would like to see'
    }
} satisfies Meta<typeof Filters.Panel>;

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

type ContentTypeType = {
    label: string;
    value: string;
    checked?: boolean;
};

const CONTENT_TYPES = [
    {
        label: 'Advice and guidance',
        value: 'advice-and-guidance'
    },
    {
        label: 'Agreement',
        value: 'agreement'
    },
    {
        label: 'Consultation analysis',
        value: 'consultation-analysis'
    },
    {
        label: 'Consultation paper',
        value: 'consultation-paper'
    },
    {
        label: 'Corporate report',
        value: 'corporate-report'
    },
    {
        label: 'Correspondence',
        value: 'correspondence'
    },
    {
        label: 'FOI/EIR release',
        value: 'foi-eir-release'
    },
    {
        label: 'Factsheet',
        value: 'factsheet'
    },
    {
        label: 'Form',
        value: 'form'
    },
    {
        label: 'Impact assessment',
        value: 'impact-assessment'
    },
    {
        label: 'Independent report',
        value: 'independent-report'
    },
    {
        label: 'Map',
        value: 'map'
    },
    {
        label: 'Minutes',
        value: 'minutes'
    },
    {
        label: 'Progress report',
        value: 'progress-report'
    },
    {
        label: 'Regulation/directive/order',
        value: 'regulation-directive-order'
    },
    {
        label: 'Research and analysis',
        value: 'research-and-analysis'
    },
    {
        label: 'Speech/statement',
        value: 'speech-statement'
    },
    {
        label: 'Statistics',
        value: 'statistics'
    },
    {
        label: 'Strategy/plan',
        value: 'strategy-plan'
    },
    {
        label: 'Transparency data',
        value: 'transparency-data'
    }
];

const CONTENT_TYPES_WITH_SELECTED = JSON.parse(JSON.stringify(CONTENT_TYPES));
CONTENT_TYPES_WITH_SELECTED[1].checked = true;
CONTENT_TYPES_WITH_SELECTED[4].checked = true;
CONTENT_TYPES_WITH_SELECTED[7].checked = true;

export const Default: Story = {
    render: () => (
        <Filters.Panel
            heading="Filter by date"
            legend="Filter by date"
        >
            <DatePicker
                hintText="For example, 21/01/2022"
                id="date-from"
                label="Updated after"
            />

            <DatePicker
                hintText="For example, 21/01/2022"
                id="date-to"
                label="Updated before"
            />
        </Filters.Panel>
    )
};

export const Scrollable: Story = {
    render: ({ ...args }) => (
        <Filters.Panel
            {...args}
            heading="Content type"
            isScrollable
            legend="Select which publication types you would like to see"
        >
            <Filters.CheckboxGroup>
                {CONTENT_TYPES.map((type) => (
                    <Checkbox
                        key={type.value}
                        label={type.label}
                        value={type.value}
                        id={type.value}
                    />
                ))}
            </Filters.CheckboxGroup>
        </Filters.Panel>
    )
};

export const WithActiveFilterCount: Story = {
    args: {},
    render: ({ ...args }) => (
        <Filters.Panel
            {...args}
            activeFilterCount={CONTENT_TYPES_WITH_SELECTED.filter((item: ContentTypeType) => item.checked).length}
            heading="Content type"
            isScrollable
            legend="Select which publication types you would like to see"
        >
            <Filters.CheckboxGroup>
                {CONTENT_TYPES_WITH_SELECTED.map((type: ContentTypeType) => (
                    <Checkbox
                        checked={type.checked || false}
                        key={type.value}
                        label={type.label}
                        value={type.value}
                        id={type.value}
                    />
                ))}
            </Filters.CheckboxGroup>
        </Filters.Panel>
    )
};