import React from 'react'
import { DemoContainer } from '@mui/x-date-pickers/internals/demo'
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'
import { TimePicker } from '@mui/x-date-pickers/TimePicker'
import { MobileTimePicker } from '@mui/x-date-pickers/MobileTimePicker'
import { DesktopTimePicker } from '@mui/x-date-pickers/DesktopTimePicker'
import type { Meta } from '@storybook/react'
import dayjs, { Dayjs } from 'dayjs'
import utc from 'dayjs/plugin/utc'
import timezone from 'dayjs/plugin/timezone'

import 'dayjs/locale/pt-br'
import 'dayjs/locale/en'
import 'dayjs/locale/es'

dayjs.extend(utc)
dayjs.extend(timezone)

const meta = {
  title: 'Form/TimePicker',
  component: TimePicker,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
  argTypes: {},
} satisfies Meta<typeof TimePicker>

export default meta

export const BasicDatePicker = () => (
  <LocalizationProvider dateAdapter={AdapterDayjs}>
    <DemoContainer components={['TimePicker']}>
      <TimePicker label="TimePicker" />
    </DemoContainer>
  </LocalizationProvider>
)

BasicDatePicker.storyName = 'TimePicker Basic'

export const TimePickerVariants = () => (
  <LocalizationProvider dateAdapter={AdapterDayjs}>
    <DemoContainer components={['TimePicker', 'MobileTimePicker', 'DesktopTimePicker']}>
      <div style={{ width: '480px', marginBottom: 30 }}>
        <TimePicker
          sx={{ minWidth: 275 }}
          label="TimePicker Responsive"
          timezone="America/Sao_Paulo"
        />
      </div>
      <div style={{ width: '480px', marginBottom: 30 }}>
        <MobileTimePicker
          sx={{ minWidth: 275 }}
          label="TimePicker Mobile"
          timezone="America/Sao_Paulo"
        />
      </div>
      <div style={{ width: '480px', marginBottom: 30 }}>
        <DesktopTimePicker
          sx={{ minWidth: 275 }}
          label="TimePicker Desktop"
          timezone="America/Sao_Paulo"
        />
      </div>
    </DemoContainer>
  </LocalizationProvider>
)

TimePickerVariants.storyName = 'TimePicker Variants'

export const TimePickerLanguage = () => (
  <>
    <div style={{ width: '480px', marginBottom: 30 }}>
      <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={'pt-br'}>
        <DemoContainer components={['TimePicker']}>
          <TimePicker
            sx={{ minWidth: 275 }}
            label="TimePicker Brazil"
            timezone="America/Sao_Paulo"
          />
        </DemoContainer>
      </LocalizationProvider>
    </div>

    <div style={{ width: '480px', marginBottom: 30 }}>
      <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={'en'}>
        <DemoContainer components={['TimePicker']}>
          <TimePicker
            sx={{ minWidth: 275 }}
            label="TimePicker English"
            timezone="America/Sao_Paulo"
          />
        </DemoContainer>
      </LocalizationProvider>
    </div>
    <div style={{ width: '480px', marginBottom: 30 }}>
      <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={'es'}>
        <DemoContainer components={['TimePicker']}>
          <TimePicker
            sx={{ minWidth: 275 }}
            label="TimePicker Spain"
            timezone="America/Sao_Paulo"
          />
        </DemoContainer>
      </LocalizationProvider>
    </div>
  </>
)

TimePickerLanguage.storyName = 'TimePicker Languages'