import React from 'react'
import { Primary, Title } from '@storybook/addon-docs/blocks'

import CopyToClipBoard from '../../storybook/StorybookHelpers/templates/CopyToClipBoard'

// TODO: Replace this with Tailwind CSS
const styles = {
  row: {
    margin: 0,
    display: 'grid',
    gridTemplateColumns: '1fr auto',
    gap: '8px',
    alignItems: 'center',
  },
  fonts: {
    gridTemplateColumns: '125px 1fr',
  },
  grid: {
    display: 'grid',
    gridTemplateColumns: 'repeat(2, 1fr)',
    gap: '64px',
  },
}

export const HelperClassTemplate = ({
  description,
}: {
  description?: React.ReactNode
}): React.JSX.Element => {
  return (
    <>
      <Title />
      {!!description && <p>{description}</p>}
      <Primary />
    </>
  )
}

type HelperClassExampleProps = {
  examples: {
    arr: { label: string; children: React.ReactNode; subtitle?: string }[]
    groupName: string
  }[]
  fonts?: boolean
  singleColumn?: boolean
}

export const HelperClassExample = ({
  examples,
  fonts,
  singleColumn,
}: HelperClassExampleProps): React.JSX.Element => {
  return (
    <div style={!singleColumn ? styles.grid : undefined}>
      {examples.map((example, exampleIndex) => (
        <div key={example.groupName} className={!singleColumn ? 'mb-8' : ''}>
          {!singleColumn && <h4 className='mb-2'>{example.groupName}</h4>}
          {example.arr.map((a, exampleArrIndex) => {
            return (
              <div
                key={a.label}
                style={{
                  ...styles.row,
                  ...(fonts ? styles.fonts : {}),
                }}
                className={`py-4 text-base ${
                  (
                    singleColumn
                      ? exampleIndex < examples.length - 1
                      : exampleArrIndex < example.arr.length - 1
                  )
                    ? 'border-b'
                    : ''
                } border-light-gray`}
              >
                <CopyToClipBoard text={a.label} tooltipPosition='left'>
                  <span>
                    <p>{a.label}</p>
                    <span className='text-2xs text-purple'>{a.subtitle}</span>
                  </span>
                </CopyToClipBoard>
                <span>{a.children}</span>
              </div>
            )
          })}
        </div>
      ))}
    </div>
  )
}