import {
  Meta,
  Title,
  Subtitle,
  ColorPalette,
  ColorItem,
} from '@storybook/blocks'

import { tokens as allTokens } from '../styles/colors'
import {capitalizeFirstLetter} from '../utils'

export const data = Object.entries(allTokens).reduce((acc, curr) => {
    const [name, value] = curr
    const nameParts = name.split('-')
    if (nameParts.length == 2) {
      if (!acc['color']) {
        acc['color'] = {}
      }
      nameParts.unshift('color')
    }

    const title = nameParts[0].toLowerCase()
    const subtitle = nameParts[1].toLowerCase()
    const token = nameParts[2].toLowerCase()

    if (!acc[title]) {
      acc[title] = {}
    }

    if (!acc[title][subtitle]) {
      acc[title][subtitle] = {}
    }

    acc[title][subtitle][token] = value

    return acc
  }, {})

<Meta title="Design system/Tokens/Colors" />


<div>
{
      Object.keys(data).map(t => {
    if (t === 'color') {
      return null
    }
    return (
      <>
        <Title>{capitalizeFirstLetter(t)}</Title>
        {
          Object.keys(data[t]).map(s => {
            return (
              <>
                <Subtitle>{capitalizeFirstLetter(s)}</Subtitle>
                {
                  (typeof data[t][s] === 'string') ? null : (
                    <ColorPalette>
                    {
                      Object.keys(data[t][s]).map(v => {
                        return (
                          <ColorItem
                            key={v}
                            title={capitalizeFirstLetter(v)}
                            subtitle=""
                            colors={{
                              [`color.${t}.${s}.${v}`]: `var(--${data[t][s][v]})`
                            }}
                          />
                        )
                      })
                    }
                    </ColorPalette>
                  )
                }
              </>
            )
          })
        }
      </>
    )
  })
}
</div>