import { FC, useCallback, useEffect } from 'react'
import { FieldType, FieldTypes, fieldTypeOptions, fieldTypesWithValues } from '../../types/schema'
import { useObjectStateWrapper } from '../../hooks/useObjectState';
import { ValueField } from './value-field';
import { HelpPopper } from '../Poppables/help';
import { Icon } from '../Icon';

interface IProps {
  update: (arg: FieldType) => void;
  field: FieldType;
  fieldName: string;
  deleteField: (arg: string) => void;
}

export const FieldEditor: FC<IProps> = ({ update, field, fieldName, deleteField }) => {
  const { bindProperty, bindPropertyCheck } = useObjectStateWrapper(field, (e) => update(typeof e === 'function' ? e(field) : e))

  const shouldShowValueField = useCallback(() => fieldTypesWithValues.includes(field.type) || field.isConstant, [field.isConstant, field.type]);

  useEffect(() => {
    console.log(field.value);
  }, [field])

  return (
    <li className="odd:bg-black/50">
      <p>{fieldName}</p>
      <div className=" flex gap-x-4 items-center p-2 w-full">
        <label className="w-min">
          Field Type:&nbsp;
          <select className="capitalize" {...bindProperty('type')}>
            {fieldTypeOptions.map(o => (
              <option className="capitalize" value={FieldTypes[o]}>{o}</option>
            ))}
          </select>
        </label>
        {shouldShowValueField() && (
          <ValueField type={field.type} bind={bindProperty('value')} />
        )}
        <span className="flex items-center gap-2">
          <label><input type="checkbox" {...bindPropertyCheck('isConstant')} /> Is constant</label>
          <HelpPopper>
            <p className="text-sm">Constant values can't be overwritten in publications. When a dice field is set to a constant value, it instead rolls a dice of that value whenever this field is displayed (unless exported). This could be useful for a randomly generated scenario or for cards being drawn as the dice value will automatically be determined by the dice roll.</p>
          </HelpPopper>
        </span>
        <label className="w-min">
          Minimum:
          <input className="w-12" type="number" {...bindProperty('minimum')} />
        </label>
        <label className="w-min">
          Limit:
          <input className="w-12" type="number" {...bindProperty('limit')} />
        </label>
        <HelpPopper>
          <p className="text-sm">Minimum and Limit apply to the number of entries allowed for this field, not the maximum and minimum value. Set the minimum to 0 to make a field optional. Set the limit to 0 to allow for unlimited entries.</p>
        </HelpPopper>
        <button className="no-default self-end ml-auto" onClick={() => deleteField(fieldName)}>
          <Icon className="svg-red-700 hover:svg-red-500 trash-can w-6 h-6" icon="trash"></Icon>
        </button>
      </div>
    </li>
  )
}
