import { Dispatch, bindActionCreators } from 'redux';
import { FormEditorAction, setHint, setInpTyp, toggleEditing } from './types';
import { InpTyp, TxtEditor, inpTyps } from './PktEl';
import { connect } from 'react-redux';
import { useRef } from 'react';
import React, { useState } from 'react';
import TextField from './TextField';

type InfoElProps = ReturnType<typeof mapDispatchToProps> & {
  el: TxtEditor;
  path: (string | number)[];
  children: React.ReactNode;
};

const InfoEl: React.FC<InfoElProps> = (props) => {
  const { el, path, setHint, setInpTyp, children } = props;

  return (
    <div className='pkt-el pkt-txt'>
      {children && <div className='children'>{children}</div>}
      {el.editing && (
        <div>
          <label htmlFor={'inptyp-' + el.uuid}>Eingabetyp</label>
          <select
            className='pkt-txt-inptyp-input'
            id={'inptyp-' + el.uuid}
            onChange={(event) =>
              setInpTyp(path, event.target.value as InpTyp | 'none')
            }
            defaultValue={el.inptyp ?? 'none'}
          >
            <option value='none'>--</option>
            {inpTyps.map((impTyp) => (
              <option value={impTyp} key={impTyp}>
                {impTyp}
              </option>
            ))}
          </select>
        </div>
      )}
      <TextField
        isTextArea={true}
        isHint={true}
        validate={() => true}
        setValue={(input) => setHint(path, input)}
        label={el.editing ? 'Notiz' : ''}
        currentValue={el.hint}
      />
    </div>
  );
};

const mapStateToProps = (state) => ({});

function mapDispatchToProps(dispatch: Dispatch<FormEditorAction>) {
  return bindActionCreators({ toggleEditing, setHint, setInpTyp }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(InfoEl);