import * as React from "react";
import {
  Flex,
  FormControl,
  FormLabel,
  FormErrorMessage,
  useColorMode
} from "@chakra-ui/core";

const labelColor = { dark: "whiteAlpha.700", light: "blackAlpha.700" };

export const FormField = ({
  label,
  name,
  error,
  hiddenLabels,
  helpIcon,
  targetInfo,
  setTarget,
  labelAddOn,
  fieldAddOn,
  children,
  ...props
}) => {
  const { colorMode } = useColorMode();

  return (
    <FormControl
      as={Flex}
      flexDirection="column"
      flex={["1 0 100%", "1 0 100%", "1 0 33.33%", "1 0 33.33%"]}
      w="100%"
      maxW="100%"
      mx={2}
      my={[2, 2, 4, 4]}
      isInvalid={error && error.message}
      {...props}
    >
      <FormLabel
        htmlFor={name}
        color={labelColor[colorMode]}
        pl={1}
        opacity={hiddenLabels ? 0 : null}
        display="flex"
        alignItems="center"
        justifyContent="space-between"
        pr={0}
      >
        {label}
        {labelAddOn || null}
      </FormLabel>
      {children}
      {fieldAddOn && (
        <Flex justifyContent="flex-end" pt={3}>
          {fieldAddOn}
        </Flex>
      )}
      <FormErrorMessage opacity={hiddenLabels ? 0 : null}>
        {error && error.message}
      </FormErrorMessage>
    </FormControl>
  );
};