import React from "react";
import { Box, Text } from "grommet";
import { StatusGoodSmall } from "grommet-icons";

import { stateToColor } 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" direction="row" align="center" gap="small">
        <StatusGoodSmall
          size="medium"
          color={stateToColor(property.vector.state)}
        />
        <Text>{property.vector.label || property.name}</Text>
      </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;