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

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={Text({ textId: '@SymbolName' })}
        inputKey='id'
        labelClassName=''
        inputClassName=''
        type='string'
        value={props.symbol.id.toString()}
        isDisabled={true} />
      <TextInputGroup
        id='displayedText'
        labelText={Text({ textId: '@SymbolDisplayedText' })}
        inputKey='displayedText'
        labelClassName=''
        inputClassName=''
        type='string'
        value={props.symbol.displayedText}
        onChange={(value) => props.onChange('displayedText', value)} />
      <TextInputGroup
        id='x'
        labelText={Text({ textId: '@SymbolX' })}
        inputKey='x'
        labelClassName=''
        inputClassName=''
        type='number'
        value={TransformX(props.symbol.x, props.symbol.width, props.symbol.config.PositionReference).toString()}
        onChange={(value) => props.onChange('x', RestoreX(Number(value), props.symbol.width, props.symbol.config.PositionReference))} />
      <TextInputGroup
        id='height'
        labelText={Text({ textId: '@SymbolHeight' })}
        inputKey='height'
        labelClassName=''
        inputClassName=''
        type='number'
        min={0}
        value={props.symbol.height.toString()}
        onChange={(value) => props.onChange('height', Number(value))} />
      <TextInputGroup
        id='width'
        labelText={Text({ textId: '@SymbolWidth' })}
        inputKey='width'
        labelClassName=''
        inputClassName=''
        type='number'
        min={0}
        value={props.symbol.width.toString()}
        onChange={(value) => props.onChange('width', Number(value))} />
    </div>
  );
}