import * as React from 'react';
import ContainerProperties from '../../Interfaces/Properties';

interface IPropertiesProps {
  properties?: ContainerProperties
  onChange: (key: string, value: string) => void
}

export class Properties extends React.PureComponent<IPropertiesProps> {
  public render(): JSX.Element {
    if (this.props.properties === undefined) {
      return <div></div>;
    }

    const groupInput: React.ReactNode[] = [];
    Object
      .entries(this.props.properties)
      .forEach((pair) => this.handleProperties(pair, groupInput));

    return (
      <div className='p-3 bg-slate-200 h-3/5 overflow-y-auto'>
        { groupInput }
      </div>
    );
  }

  public handleProperties = (
    [key, value]: [string, string | number],
    groupInput: React.ReactNode[]
  ): void => {
    const id = `property-${key}`;
    const type = 'text';
    const isDisabled = key === 'id' || key === 'parentId'; // hardcoded
    groupInput.push(
      <div key={id} className='mt-4'>
        <label className='text-sm font-medium text-gray-800' htmlFor={id}>{key}</label>
        <input
          className='text-base font-medium transition-all text-gray-800 mt-1 block w-full px-3 py-2
          bg-white border-2 border-white rounded-lg placeholder-gray-800
          focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500
         disabled:bg-slate-300 disabled:text-gray-500 disabled:border-slate-300 disabled:shadow-none
         '
          type={type}
          id={id}
          value={value}
          onChange={(event) => this.props.onChange(key, event.target.value)}
          disabled={isDisabled}
        />
      </div>
    );
  };
}