import React, { useState } from 'react'

import type { Meta, StoryObj } from '@storybook/react'
import UncontrolledTabs from '../components/UncontrolledTabs/UncontrolledTabs'
import { DataTabs } from '../types'
import { Typography } from '@mui/material'

const data: DataTabs[] = [
  {
    label: 'Tab 1',
    id: 'panel-1',
    children: (
      <Typography>
        Tab 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus
        ex, sit amet blandit leo lobortis eget.
      </Typography>
    ),
  },
  {
    label: 'Tab 2',
    id: 'panel-2',
    children: (
      <Typography>
        Tab 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus
        ex, sit amet blandit leo lobortis eget.
      </Typography>
    ),
  },
]

const meta = {
  title: 'Uncontrolled/Tabs',
  component: UncontrolledTabs,
  tags: ['autodocs'],
  parameters: {
    layout: 'centered',
  },
  argTypes: {
    tabs: data,
  },
} satisfies Meta<typeof UncontrolledTabs>

export default meta

type Story = StoryObj<typeof meta>

export const Playground: Story = {
  args: {
    tab: 0,
    tabs: data,
  },
}

export const UncontrolledTabsBasic = () => {
  const [tab, setTab] = useState(0)
  return (
    <div style={{ width: '480px', marginBottom: 30 }}>
      <UncontrolledTabs tab={tab} tabs={data} onTabChange={(evt, tab) => setTab(tab)} />
    </div>
  )
}

UncontrolledTabsBasic.storyName = 'Uncontrolled Tabs'

export const UncontrolledTabsInfo = () => {
  const [tab, setTab] = useState(0)
  return (
    <div style={{ width: '480px', marginBottom: 30 }}>
      <UncontrolledTabs
        info={<div>Informação dentro da tab</div>}
        tab={tab}
        tabs={data}
        onTabChange={(evt, tab) => setTab(tab)}
      />
    </div>
  )
}

UncontrolledTabsInfo.storyName = 'Uncontrolled Tabs With  Info';

export const UncontrolledTabsAndTabPanelSx = () => {
  const [tab, setTab] = useState(0);
  return (
    <div style={{ width: '480px', marginBottom: 30 }}>
      <UncontrolledTabs
        info={<div>tabPanelSx permite estilizar a tab</div>}
        tab={tab}
        tabs={data}
        onTabChange={(evt, tab) => setTab(tab)}
        tabPanelSx={{ backgroundColor: 'gray', color: 'orange', p: 0 }}
      />
    </div>
  );
};

UncontrolledTabsAndTabPanelSx.storyName = 'Uncontrolled Tabs With  Info and tabPanelSx';