import React from 'react'
import { type StoryFn } from '@storybook/react-vite'

import {
  HelperClassExample,
  HelperClassTemplate,
} from '../../CSS/HelperClassTemplate'

export default {
  title: 'CSS Helper Classes/Borders',
  parameters: {
    docs: {
      page: () => <HelperClassTemplate />,
    },
  },
} as Record<string, unknown>

const Template = (args: {
  values: {
    groupName: string
    arr: {
      label: string
      subtitle: string
      children: React.JSX.Element
    }[]
  }[]
}) => <HelperClassExample examples={args.values} />

const borderClasses = [
  {
    groupName: 'Borders',
    classNames: [
      { css: 'border: 1px solid;', name: 'border' },
      { css: 'border-top: 1px solid;', name: 'border-t' },
      { css: 'border-right: 1px solid;', name: 'border-r' },
      { css: 'border-bottom: 1px solid;', name: 'border-b' },
      { css: 'border-left: 1px solid;', name: 'border-l' },
    ],
  },
  {
    groupName: 'Border Radius',
    classNames: [
      { css: 'border-radius: 4px;', name: 'border rounded-sm' },
      { css: 'border-radius: 8px;', name: 'border rounded-lg' },
      { css: 'border-radius: 16px;', name: 'border rounded-2xl' },
      { css: 'border-radius: 1000px;', name: 'border rounded-full' },
    ],
  },
]

const valuesArr = borderClasses.map((fClass) => {
  return {
    groupName: fClass.groupName,
    arr: fClass.classNames.map((className) => {
      return {
        label: className.name,
        subtitle: className.css,
        children: (
          <div
            style={{ width: 100, height: 100 }}
            className={`${className.name} bg-light-purple`}
          ></div>
        ),
      }
    }),
  }
})

export const borders: StoryFn<{
  values: {
    groupName: string
    arr: {
      label: string
      subtitle: string
      children: React.JSX.Element
    }[]
  }[]
}> = Template.bind({})
borders.args = {
  values: valuesArr,
}
borders.parameters = {
  ...borders.parameters,
  previewTabs: {
    canvas: {
      hidden: true,
    },
  },
  viewMode: 'docs',
  storyName: 'Borders',
}