import type { Meta, StoryObj } from '@storybook/react'

import React from 'react'

import Flex from '@/components/atoms/Flex'
import Heading from '@/components/atoms/Heading'
import { utilities } from '@/styles/utilities'
import { grid_conf } from '@/styles/variables'

export default {
  title: 'Documentation/Utilities'
} as Meta

export const Utilities: StoryObj = {
  render: args => (
    <div style={{ width: '100%' }}>
      <Flex direction={'row'} align={'center'} wrap={'wrap'} gap={'4px'}>
        {Object.keys(utilities).map((utility, i) => {
          const property = utilities[utility]?.property
          const className = utilities[utility]?.class || property
          const values = utilities[utility]?.values
          const responsive = utilities[utility]?.responsive

          return (
            <div key={`utilities-${i}`} className={'w-100 mb-6'}>
              <Heading tag="span" size="texts" style={{ fontWeight: 700 }}>
                {utility}
              </Heading>
              <pre>
                <code>
                  {Object.keys(values).map((key, i) => {
                    return (
                      <>
                        <span key={`utility-${i}`}>
                          {`.${`${className}-${key}`}{${property}: ${
                            values[key]
                          };}`}
                          <br />
                        </span>
                        {responsive && (
                          <span>
                            {`.${className}-md-${key}{@media (min-width: ${grid_conf.breakpoints.$md}){ ${property}: ${values[key]};}}`}
                            <br />
                          </span>
                        )}
                      </>
                    )
                  })}
                </code>
              </pre>
            </div>
          )
        })}
      </Flex>
    </div>
  ),
  args: {}
}