/* @aztlan/generator-front 1.1.4 */
import * as React from 'react'

import * as PropTypes from 'prop-types'
import { InferProps } from 'prop-types'

import styleNames from '@aztlan/bem'

import { useHumanReadableOpeningHours } from '../hooks/index.js'

const baseClassName = styleNames.base
const componentClassName = 'item'

/**
 * description
 * @param {InferProps<typeof Item.propTypes>} props -
 * @returns {React.ReactElement} - Rendered Item
 */
function Item({
  id,
  className: userClassName,
  style,
  start,
  end,
  format,
  remove,
}: // ...otherProps

InferProps<typeof Item.propTypes>): React.ReactElement {
  const {
    openDay, openTime, closeDay, closeTime,
  } = useHumanReadableOpeningHours(
    [
      start,
      end,
    ], { format: format as 12 | 24 },
  )

  return (
    <div
      id={id}
      className={[
        baseClassName,
        componentClassName,
        userClassName,
        'container',
      ]
        .filter((e) => e)
        .join(' ')}
      style={style}
      // {...otherProps}
    >
      <span>
        {`
        From
        ${openDay} 
        ${openTime}
        to 
        ${closeDay}
        ${closeTime}
        `}
      </span>
      <button onClick={remove}>Remove</button>
    </div>
  )
}

Item.propTypes = {
  /** The HTML id for this element */
  id:PropTypes.string,

  /** The HTML class names for this element */
  className:PropTypes.string,

  /** The React-written, css properties for this element. */
  style:PropTypes.objectOf(PropTypes.string),

  /** The start time */
  start:PropTypes.string.isRequired,

  /** The end time */
  end:PropTypes.string.isRequired,

  /** The format */
  format:PropTypes.oneOf([
    12,
    24,
  ]),

  /** A function to remove the item from the list */
  remove:PropTypes.func,
}

export default Item