/* eslint-disable no-underscore-dangle */
/* @aztlan/generator-front 2.0.9 */
import * as React from 'react'
import {
  useMemo, useInsertionEffect,
} from 'react'

import styleNames from '@aztlan/bem'
import { propTypes } from './types.js'
import type { Props } from './types.js'
import { Base as BaseForm } from '../Base/index.js'
import { getEntityByName } from '../../utils/index.js'
import CreateForm from './Create.js'

import * as entities from '../../entities/index.js'

const baseClassName = styleNames.base
const componentClassName = 'create-entity'

/**
 * description
 * @param {InferProps<typeof CreateForm.propTypes>} props -
 * @returns {React.ReactElement} - Rendered CreateForm
 */
function EntitySelectCreateForm(props): React.ReactElement {
  useInsertionEffect(
    () => {
    // @ts-ignore
      import('./styles.scss')
    }, [],
  )

  const [
    Model,
    setModel,
  ] = React.useState(null)

  const onChange = (e) => {
    // TODO clean
    const M = getEntityByName(e.target.value.replace(
      'Entity', '',
    ))
    setModel(() => M)
  }

  const options = useMemo(
    () => Object.keys(entities).map((key) => ({
      value:key,
      label:key,
    })),
    [],
  )

  return (
    <>
      <select
        id=""
        name=""
        key="select"
        onChange={onChange}
      >
        {options.map((option) => (
          <option value={option.value}>{option.label}</option>
        ))}
      </select>
      {Model && (
      <CreateForm
        Model={Model}
        {...props}
      />
      )}
    </>
  )
}

EntitySelectCreateForm.propTypes = propTypes

export default EntitySelectCreateForm