import React from 'react'
import type { Meta, StoryObj } from '@storybook/react'
import { ProgressBar } from '../components'
import { ColorVariant } from '../types'

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

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

export default meta

type Story = StoryObj<typeof meta>

const defaultArgs = {
  disabled: false,
}

export const Playground: Story = {
  args: {
    label: 'Progress',
    total: 100,
    color: 'primary',
    value: 10,
  },
}

export const ProgressBarBasic = () => (
  <div style={{ display: 'flex', gap: '1rem', width: '320px' }}>
    <div style={{ position: 'relative', width: '100%' }}>
      <ProgressBar value={40} total={100} color="primary" />
    </div>
  </div>
)

ProgressBarBasic.storyName = 'ProgressBar Basic'

export const ProgressBarTitle: Story = () => (
  <div style={{ display: 'flex', gap: '1rem', width: '320px' }}>
    <div style={{ position: 'relative', width: '100%' }}>
      <ProgressBar value={10} label="Progress" total={100} />
    </div>
  </div>
)

ProgressBarTitle.storyName = 'ProgressBar With Title'

export const ProgressBarColors: Story = () => (
  <>
    <div style={{ display: 'flex', gap: '1rem', width: '480px', marginBottom: 30 }}>
      <div style={{ position: 'relative', flex: 1, width: '230px' }}>
        <ProgressBar value={100} total={300} color="inherit" label="Progress Inherit" />
      </div>
      <div style={{ position: 'relative', flex: 1, width: '230px' }}>
        <ProgressBar value={125} total={1000} color="secondary" label="Progress secondary" />
      </div>
    </div>
    <div style={{ display: 'flex', gap: '1rem', width: '480px', marginBottom: 30 }}>
      <div style={{ position: 'relative', flex: 1, width: '230px' }}>
        <ProgressBar value={22} total={100} color="error" label="Progress error" />
      </div>
      <div style={{ position: 'relative', flex: 1, width: '230px' }}>
        <ProgressBar value={24} total={100} color="info" label="Progress info" />
      </div>
    </div>
    <div style={{ display: 'flex', gap: '1rem', width: '480px', marginBottom: 30 }}>
      <div style={{ display: 'flex', gap: '1rem', marginBottom: 15 }}>
        <div style={{ position: 'relative', flex: 1, width: '230px' }}>
          <ProgressBar value={45} total={100} color="success" label="Progress success" />
        </div>
        <div style={{ position: 'relative', flex: 1, width: '230px' }}>
          <ProgressBar value={86} total={100} color="warning" label="Progress warning" />
        </div>
      </div>
    </div>
  </>
)

ProgressBarColors.storyName = 'ProgressBar Colors'

export const ProgressBarCustomColors: Story = () => (
  <>
    <div style={{ display: 'flex', gap: '1rem', width: '480px', marginBottom: 30 }}>
      <div style={{ position: 'relative', flex: 1, width: '230px' }}>
        <ProgressBar
          value={50}
          total={100}
          colorCustom={{ root: 'rgba(179, 222, 105, 0.2)', bar: '#b3de69' }}
          htmlLabel={<div>Custom Color Green</div>}
        />
      </div>
    </div>
    <div style={{ display: 'flex', gap: '1rem', width: '480px', marginBottom: 30 }}>
      <div style={{ position: 'relative', flex: 1, width: '230px' }}>
        <ProgressBar
          value={75}
          total={100}
          colorCustom={{ root: 'rgba(0, 191, 255, 0.2)', bar: '#00bfff' }}
          label="Custom Color Blue"
          h={5}
          hideValue
          fSize="12px"
        />
      </div>
    </div>
  </>
)

ProgressBarCustomColors.storyName = 'ProgressBar Custom Colors'