import React from "react";
import { Box } from "grommet";

import { stateToEmoji } from "../../utils/indi";
import LightVector from "./light";
import NumberVector from "./number";
import SwitchVector from "./switch";
import TextVector from "./text";

const Property = ({ property }) => {
  return (
    <Box direction="row" margin={{bottom: "medium"}} align="center">
      <Box width="medium">
        <div>
          {stateToEmoji(property.vector.state)}{" "}
          <strong>{property.vector.label || property.name}</strong>
        </div>
      </Box>
      {property.vector.__typename === "NumberVector" && (
        <NumberVector vector={property.vector} />
      )}
      {property.vector.__typename === "SwitchVector" && (
        <SwitchVector vector={property.vector} />
      )}
      {property.vector.__typename === "TextVector" && (
        <TextVector vector={property.vector} />
      )}
      {property.vector.__typename === "LightVector" && (
        <LightVector vector={property.vector} />
      )}
    </Box>
  );
};

export default Property;