import React, { useState } from 'react';
import IContainerProperties from '../../Interfaces/IContainerProperties';
import { ISymbolModel } from '../../Interfaces/ISymbolModel';
import { ToggleButton } from '../ToggleButton/ToggleButton';
import { Form } from './Form';

interface IPropertiesProps {
  properties?: IContainerProperties
  symbols: Map<string, ISymbolModel>
  onChange: (key: string, value: string | number | boolean, isStyle?: boolean) => void
  onSubmit: (event: React.FormEvent<HTMLFormElement>) => void
}

export const Properties: React.FC<IPropertiesProps> = (props: IPropertiesProps) => {
  const [isDynamicInput, setIsDynamicInput] = useState<boolean>(true);

  if (props.properties === undefined) {
    return <div></div>;
  }

  return (
    <div className='h-3/5 p-3 bg-slate-200 overflow-y-auto'>
      <ToggleButton
        id='isDynamic'
        text='Dynamic update'
        title='Enable dynamic svg update'
        checked={isDynamicInput}
        onChange={() => setIsDynamicInput(!isDynamicInput)}
      />
      <Form
        properties={props.properties}
        symbols={props.symbols}
        isDynamicInput={isDynamicInput}
        onChange={props.onChange}
        onSubmit={props.onSubmit}
      />
    </div>
  );
};