/* eslint-disable */
/* prettier-ignore */
/**
 * @lint eslint fails on this ts file...
 * so does prettier,
 * something is wrong in here
 */
import React from 'react'
import {
  IconWrapper,
  IconContainer,
  IconNumber,
  IconPanel,
  IconNamePanel,
  // @todo rename Identifier
  IconIDLabel,
} from './_styled'
import { IconGridProps } from './typings'
import { incrementIndex, getIndex } from './_deps'
import ErrorBoundary from './ErrorBoundary'

export function createIconGrid(Component: any, name: string, props: IconGridProps) {
  incrementIndex()
  const index = getIndex()
  const identifier = props.type || props.headingType || props.breedType
  const attributes = {
    index,
    identifier,
    // Component,
    name,
    props,
  }

  console.log('rendering', name)

  const view = (
    <ErrorBoundary {...attributes}>
      <Component {...props} />
    </ErrorBoundary>
  )

  return (
    <IconContainer key={name + index}>
      <IconNumber>{index}</IconNumber>
      <IconPanel>{view}</IconPanel>
      <IconNamePanel>{name}</IconNamePanel>
    </IconContainer>
  )
}

// <IconIDLabel>"{identifier}"</IconIDLabel>