import { useFormatsQuery, Format, FormatsQuery, FormatsQueryVariables } from '../../gql'
import Selector from './Selector'

interface IFormatSelector {
  value?: Format
  onChange: GenericEventHandler
  name?: string
  label?: string
  className?: string
}

const FormatSelectItem = ({ data }: { data: Format }) => {
  return (
    <div>
      <h3>{data.name}</h3>
      <p>{data.description}</p>
    </div>
  )
}

const FormatSelector = ({
  value,
  onChange,
  name = 'type',
  label = 'Training type',
  className = 'training-type',
}: IFormatSelector) => {
  return (
    <Selector<FormatsQuery, FormatsQueryVariables>
      SelectorItem={FormatSelectItem}
      name={name}
      value={value}
      onChange={onChange}
      query={useFormatsQuery}
      searchKeys={['name_contains', 'description_contains']}
      className={className}
    />
  )
}
export default FormatSelector