import Size from './Size'
import Color from './Color'
import Display from './Display'
import Background from './Background'

import properties from '../../../database/properties.json'

const PropertyInner = ({ props }) => {
  const type = props.type;
  const value = props.value;

  const propsNew = {
    id: props.id,
    value: value,
    settings: properties[type],
    selected: value
  }

  switch (type) {
    // case 'display':
    //   return <Display props={propsNew} />
    // case 'width':
    //   return <Size props={propsNew} />
    // case 'height':
    //   return <Size props={propsNew} />
    case 'color':
      return <Color props={propsNew} />
    case 'background':
      const selectedBg = type === "background" ? value.indexOf("url") > -1 ? "image" : value.indexOf("gradient") > -1 ? "gradient" : "color" : "color";
      const propsBg = { ...propsNew, selected: selectedBg }
      return <Background props={propsBg} />
    default:
      return;
  }
}

function Property({ props }) {
  return (
    <PropertyInner props={props} />
  )
}

export default Property