import React from 'react'
import type { Meta, StoryObj } from '@storybook/react'
import { RangerSlider } from '../components'
import { ColorVariant, TextFieldSizeVariant } from '../types'
import { TextField } from '@mui/material'

const colors: ColorVariant[] = [
  'inherit',
  'primary',
  'secondary',
  'success',
  'error',
  'info',
  'warning',
]
const sizes: TextFieldSizeVariant[] = ['small', 'medium']

const meta: Meta<typeof RangerSlider> = {
  title: 'Display/RangerSlider',
  component: RangerSlider,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
  argTypes: {
    color: {
      control: { type: 'select' },
      options: colors,
      description: 'Define a cor do slider.',
    },
    size: {
      control: { type: 'select' },
      options: sizes,
      description: 'Define o tamanho do slider.',
    },
    min: {
      control: { type: 'number' },
      defaultValue: 0,
      description: 'Define o valor mínimo do slider.',
    },
    max: {
      control: { type: 'number' },
      defaultValue: 100,
      description: 'Define o valor máximo do slider.',
    },
    step: {
      control: { type: 'number' },
      defaultValue: 1,
      description: 'Define o passo do slider.',
    },
    valueLabelDisplay: {
      control: { type: 'select' },
      options: ['on', 'auto', 'off'],
      defaultValue: 'auto',
      description: 'Controla a exibição dos rótulos de valor.',
    },
    valueLabelFormat: {
      control: { type: 'function' },
      description: 'Função para formatar o rótulo do valor.',
    },
    defaultValue: {
      control: { type: 'number' },
      defaultValue: 50,
      description: 'Define o valor padrão do slider.',
    },
    onChange: {
      action: 'changed',
      description: 'Função callback que é disparada quando o valor do slider é alterado.',
    },
  },
}

export default meta

type Story = StoryObj<typeof meta>

export const RangerSliderBasic: Story = {
  args: {
    value: [0, 37],
    valueLabelDisplay: 'on',
    getAriaLabel: () => 'Faixa de temperatura',
    showValueInline: true,
    label: 'Faixa de temperatura',
  },
  argTypes: {
    value: {
      control: { type: 'array' },
    },
  },
  render: (args) => {
    const [value, setValue] = React.useState<number[]>(args.value)

    const handleChange = (event: Event, newValue: number | number[]) => {
      setValue(newValue as number[])
      args.onChange?.(event, newValue, 0)
    }

    return (
      <div style={{ display: 'flex', gap: '1rem', width: '480px', marginBottom: 30 }}>
        <RangerSlider {...args} value={value} onChange={handleChange} />
      </div>
    )
  },
  name: 'RangerSlider Básico',
}

export const RangerSliderFormatter: Story = {
  args: {
    value: [0, 540],
    valueLabelDisplay: 'off',
    getAriaLabel: () => 'Faixa de tempo',
    showValueInline: true,
    valueLabelFormat: (value: number) => {
      if (value < 60) {
        return `${value}s`
      } else if (value < 3600) {
        const minutes = Math.floor(value / 60)
        const seconds = value % 60
        return seconds === 0 ? `${minutes}min` : `${minutes}min ${seconds}s`
      } else {
        const hours = Math.floor(value / 3600)
        const minutes = Math.floor((value % 3600) / 60)
        const seconds = value % 60
        if (minutes === 0 && seconds === 0) {
          return `${hours}h`
        } else if (minutes === 0) {
          return `${hours}h ${seconds}s`
        } else if (seconds === 0) {
          return `${hours}h ${minutes}min`
        } else {
          return `${hours}h ${minutes}min ${seconds}s`
        }
      }
    },
    min: 0,
    max: 1000,
    label: 'Faixa de tempo',
  },
  argTypes: {
    value: {
      control: { type: 'array' },
    },
  },
  render: (args) => {
    const [value, setValue] = React.useState<number[]>(args.value)

    const handleChange = (event: Event, newValue: number | number[]) => {
      setValue(newValue as number[])
      args.onChange?.(event, newValue, 0)
    }

    return (
      <div style={{ display: 'flex', gap: '1rem', width: '480px', marginBottom: 30 }}>
        {/* <TextField size="small" variant='standard' /> */}
        <RangerSlider {...args} value={value} onChange={handleChange} />
        {/* <TextField size="small" variant='standard' /> */}
      </div>
    )
  },
  name: 'RangerSlider com Formatter',
}