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

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

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

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