import React from 'react';
import { PropertyType } from '../../Enums/PropertyType';
import { IContainerProperties } from '../../Interfaces/IContainerProperties';
import { ISymbolModel } from '../../Interfaces/ISymbolModel';
import { ContainerForm } from './ContainerForm';

interface IPropertiesProps {
  properties?: IContainerProperties
  symbols: Map<string, ISymbolModel>
  onChange: (key: string, value: string | number | boolean, type?: PropertyType) => void
}

export function Properties(props: IPropertiesProps): JSX.Element {
  if (props.properties === undefined) {
    return <div></div>;
  }

  return (
    <div className='h-3/5 p-3 bg-slate-200 overflow-y-auto'>
      <ContainerForm
        properties={props.properties}
        symbols={props.symbols}
        onChange={props.onChange} />
    </div>
  );
}