import React from 'react'
import { TimeLine, TimeLineData } from '../components/TimeLine/TimeLine'
import type { Meta } from '@storybook/react'
import { Stack } from '@mui/material'

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

const data: TimeLineData[] = [
  {
    date: '01/10/2024 às 11:34:32',
    description: 'Classificador criado por Reinaldo Lopes - Versão 1.0',
    children: (
      <a href="https://v5.mui.com/material-ui/react-timeline/" target="_blank">
        Ver configuração
      </a>
    ),
  },
  {
    date: '01/10/2024 às 11:38:12',
    description: 'Classificador alterado por Artur Mortari - Versão 2.0',
    children: (
      <a href="https://v5.mui.com/material-ui/react-timeline/" target="_blank">
        Ver configuração
      </a>
    ),
  },
  {
    date: '01/10/2024 às 11:40:19',
    description: 'Classificador Iniciado por Artur Mortari',
  },
  {
    date: '01/10/2024 às 11:49:32',
    description: 'Classificador pausado por Reinaldo Lopes',
  },
  {
    date: '04/10/2024 às 09:38:12',
    children: (
      <a href="https://v5.mui.com/material-ui/react-timeline/" target="_blank">
        Ver configuração
      </a>
    ),
  },
  {
    date: '04/10/2024 às 10:00:00',
    description: 'Classificador Iniciado por Artur Mortari',
  },
]

export const TimeLineBasic = () => {
  return (
    <>
      <TimeLine data={data} />
    </>
  )
}

export const TimeLineThemes = () => {
  return (
    <Stack direction="row" spacing={2}>
      {['primary', 'secondary', 'inherit', 'error', 'info', 'success', 'warning'].map(
        (color, key) => (
          <TimeLine data={data} theme={color} key={key} />
        ),
      )}
    </Stack>
  )
}

export const TimeLineColor = () => {
  return (
    <>
      <TimeLine data={data} color="#9c27b0" />
    </>
  )
}

export default meta