import * as React from 'react';
import { ISymbolModel } from '../../Interfaces/ISymbolModel';
import { RestoreX, TransformX } from '../../utils/svg';
import { InputGroup } from '../InputGroup/InputGroup';

interface ISymbolFormProps {
  symbol: ISymbolModel
  symbols: Map<string, ISymbolModel>
  onChange: (key: string, value: string | number | boolean) => void
}

export function SymbolForm(props: ISymbolFormProps): JSX.Element {
  return (
    <div className='grid grid-cols-2 gap-y-4'>
      <InputGroup
        labelText='Name'
        inputKey='id'
        labelClassName=''
        inputClassName=''
        type='string'
        value={props.symbol.id.toString()}
        isDisabled={true} />
      <InputGroup
        labelText='x'
        inputKey='x'
        labelClassName=''
        inputClassName=''
        type='number'
        value={TransformX(props.symbol.x, props.symbol.width, props.symbol.config.XPositionReference).toString()}
        onChange={(event) => props.onChange('x', RestoreX(Number(event.target.value), props.symbol.width, props.symbol.config.XPositionReference))} />
      <InputGroup
        labelText='Height'
        inputKey='height'
        labelClassName=''
        inputClassName=''
        type='number'
        min={0}
        value={props.symbol.height.toString()}
        onChange={(event) => props.onChange('height', Number(event.target.value))} />
      <InputGroup
        labelText='Width'
        inputKey='width'
        labelClassName=''
        inputClassName=''
        type='number'
        min={0}
        value={props.symbol.width.toString()}
        onChange={(event) => props.onChange('width', Number(event.target.value))} />
    </div>
  );
}
