import { ReactNode } from 'react';

import { Box, Flex, Text } from '@chakra-ui/react';
import { MdErrorOutline, MdHelpOutline, MdRefresh } from 'react-icons/md';

import { useFormidableContextElement } from '../formidable';

const DisplayLabel = ({
  label,
  isRequired,
}: {
  label?: ReactNode;
  isRequired: boolean;
}) => {
  if (!label) {
    return <></>;
  }
  return (
    <Text marginRight="auto" fontWeight="bold">
      {label}{' '}
      {isRequired && (
        <Text as="span" color="red.600">
          *
        </Text>
      )}
    </Text>
  );
};

const DisplayHelp = ({ help }: { help?: ReactNode }) => {
  if (!help) {
    return <></>;
  }
  return (
    <Flex direction="row">
      <MdHelpOutline />
      <Text alignContent="center">{help}</Text>
    </Flex>
  );
};
const DisplayError = ({ error }: { error?: ReactNode }) => {
  if (!error) {
    return <></>;
  }
  return (
    <Flex direction="row" color="red.600">
      <MdErrorOutline />
      <Text alignContent="center">{error}</Text>
    </Flex>
  );
};

export type FormGroupProps = {
  children: ReactNode;
  name: string;
  error?: ReactNode;
  help?: ReactNode;
  label?: ReactNode;
  isRequired?: boolean;
  disableSingleLine?: boolean;
};

export const FormGroup = ({
  children,
  name,
  help,
  label,
  isRequired = false,
  disableSingleLine,
}: FormGroupProps) => {
  const { form, error, isModify, onRestore } =
    useFormidableContextElement(name);
  const enableModifyNotification =
    form.configuration.enableModifyNotification ?? false;
  const enableReset = form.configuration.enableReset ?? false;
  const singleLine = disableSingleLine
    ? false
    : form.configuration.singleLineForm;
  return (
    <Flex
      borderLeftWidth="3px"
      borderLeftColor={
        error
          ? 'red.600'
          : enableModifyNotification && isModify
            ? 'blue.600'
            : '#00000000'
      }
      paddingLeft="7px"
      paddingY="4px"
      width="full"
      direction="column"
    >
      {singleLine && (
        <>
          <Flex direction="row" width="full" gap="52px">
            <Box width="10%">
              <DisplayLabel label={label} isRequired={isRequired} />
              {!!onRestore && isModify && enableReset && (
                <MdRefresh size="15px" onClick={onRestore} cursor="pointer" />
              )}
            </Box>
            <Flex direction="column" width={'90%'} gap="5px">
              {children}
              <DisplayHelp help={help} />
              <DisplayError error={error} />
            </Flex>
          </Flex>
        </>
      )}
      {!singleLine && (
        <>
          <Flex direction="row" width="full" gap="52px">
            <Box width="full">
              <DisplayLabel label={label} isRequired={isRequired} />
              {!!onRestore && isModify && enableReset && (
                <MdRefresh size="15px" onClick={onRestore} cursor="pointer" />
              )}
            </Box>
          </Flex>
          {children}
          <DisplayHelp help={help} />
          <DisplayError error={error} />
        </>
      )}
    </Flex>
  );
};