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

import Flex from '@/components/atoms/Flex'
import Heading from '@/components/atoms/Heading'
import Icon from '@/components/atoms/Icon'
import React from 'react'
import Spacer from '@/components/atoms/Spacer'
import { iconsList } from '@/helpers/getIcons'

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

export const Icons: StoryObj = {
  render: args => (
    <div style={{ width: '100%' }}>
      <div>
        <Heading size={'h4'}>How To:</Heading>
        <ol style={{ paddingLeft: '20px' }}>
          <li>
            Create your font at{' '}
            <a href="https://icomoon.io/" target="_blank">
              Icomoon
            </a>
          </li>
          <li>Download your font</li>
          <li>
            Replace <em>/src/iconList.json</em> content with{' '}
            <em>selection.json</em> content
          </li>
          <li>
            Replace all the files from <em>/public/fonts/</em> with{' '}
            <em>fonts/</em> from the zip
          </li>
          <li>
            Replace all css rules in <em>/src/styles/Icon</em> with the new ones
            from style.css
          </li>
          <li>Bump DS version</li>
          <li>Move miewfont folder to nextjs public folder</li>
        </ol>
      </div>
      <Spacer height={6} />
      <span className="d-block h4 mb-adapt-4">
        <strong>There are {Object.values(iconsList).length} icons</strong>
      </span>
      <Spacer height={3} />
      <Flex direction={'row'} wrap={'wrap'} gap={'4px'}>
        {iconsList &&
          iconsList.map((icon, i) => (
            <span
              key={i}
              style={{
                width: '16.666%',
                border: '1px solid rgb(229, 229, 229)',
                textAlign: 'center'
              }}
            >
              <Icon icon={icon} style={{ fontSize: '3rem', padding: '2rem' }} />
              <Heading
                size={'h6'}
                style={{ background: 'rgb(244, 244, 244)', lineHeight: '3em' }}
              >
                {icon}
              </Heading>
            </span>
          ))}
      </Flex>
    </div>
  ),
  args: {}
}