import React from 'react'
import type { Meta, StoryObj } from '@storybook/react'

import { FilterBar } from './FilterBar'
import { Filters } from './FilterBarTypes'

const meta: Meta<typeof FilterBar> = {
  title: 'Components/FilterBar',
  component: FilterBar,
}

export default meta

type Story = StoryObj<typeof FilterBar>

export const Main: Story = {
  args: {
    disableCalendarDates: {
      disabledDatesByPage: [
        {
          page: '/rooms',
          offset: 7,
        },
        {
          page: '/events',
          offset: -1,
        },
      ],
    },
    fullWidth: false,
    language: 'en',
    redirectUrl: 'http://localhost:4000/',
    ageCategories: [
      {
        id: '1',
        name: 'Alle 6 vuotiaat',
        minVal: 0,
        sortOrder: 1,
      },
      {
        id: '2',
        name: '6-16 vuotiaat',
        minVal: 0,
        sortOrder: 2,
      },
      {
        id: '3',
        name: 'Aikuiset',
        minVal: 1,
        sortOrder: 3,
      },
    ],
    palette: {
      primary: '',
      secondary: '',
      error: '#d32f2f',
    },
    mode: 'dark',
    tabs: [
      {
        path: '/rooms',
        label: 'Rooms',
        default: true,
        order: 2,
      },
      {
        path: '/events',
        label: 'Events',
        default: false,
        order: 1,
      },
    ],
    outerLoading: false,
    locations: {
      multiSelect: false,
      disabled: false,
      data: [
        {
          id: 1,
          label: 'Helsinki Center',
          description: 'Main training facility in downtown',
          imageUrl: '',
        },
        {
          id: 2,
          label: 'Espoo Campus',
          description: 'Modern facilities with sea views',
          imageUrl: null,
        },
        {
          id: 3,
          label: 'Tampere Resort',
          description: 'Lakeside retreat with full amenities',
          imageUrl: null,
        },
        {
          id: 4,
          label: 'Turku Harbor',
          description: 'Modern facilities with sea views',
          imageUrl: null,
        },
        {
          id: 5,
          label: 'Oulu North',
          description: 'Northern location with winter activities',
          imageUrl: null,
        },
      ],
    },
  },
  render: (args) => (
    <div style={{ background: 'white', height: '100vh' }}>
      <FilterBar {...args} onSubmit={false ? null : (_val: Filters) => null} />
    </div>
  ),
}