import { ReactNode } from 'react';

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

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

const DisplayLabel = ({
  label,
  isRequired,
}: {
  label?: ReactNode;
  isRequired: boolean;
}) => {
  if (!label) {
    return <></>;
  }
  return (
    <Text marginRight="auto" paddingY="5px" 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 (
    <FormGroupShow
      help={help}
      label={label}
      isRequired={isRequired}
      error={error}
      isModify={isModify}
      enableModifyNotification={enableModifyNotification}
      enableReset={enableReset}
      singleLine={singleLine}
      onRestore={onRestore}
    >
      {children}
    </FormGroupShow>
  );
};

export type FormGroupShowProps = {
  children: ReactNode;
  help?: ReactNode;
  label?: ReactNode;
  isRequired?: boolean;
  error?: ReactNode;
  isModify?: boolean;
  enableModifyNotification?: boolean;
  enableReset?: boolean;
  singleLine?: boolean;
  onRestore?: () => void;
};

export const FormGroupShow = ({
  children,
  help,
  label,
  isRequired = false,
  error,
  isModify = false,
  enableModifyNotification = true,
  enableReset = true,
  singleLine = false,
  onRestore,
}: FormGroupShowProps) => {
  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">
            <Flex width="10%">
              <DisplayLabel label={label} isRequired={isRequired} />
              {!!onRestore && isModify && enableReset && (
                <Icon sizeIcon="150px">
                  <MdRefresh onClick={onRestore} cursor="pointer" />
                </Icon>
              )}
            </Flex>
            <Flex direction="column" width={'90%'} gap="5px">
              {children}
              <DisplayHelp help={help} />
              <DisplayError error={error} />
            </Flex>
          </Flex>
        </>
      )}
      {!singleLine && (
        <>
          <Flex direction="row" width="full" gap="52px">
            <Flex width="full">
              <DisplayLabel label={label} isRequired={isRequired} />
              {!!onRestore && isModify && enableReset && (
                <Icon sizeIcon="30px" onClick={onRestore} cursor="pointer">
                  <MdRefresh />
                </Icon>
              )}
            </Flex>
          </Flex>
          {children}
          <DisplayHelp help={help} />
          <DisplayError error={error} />
        </>
      )}
    </Flex>
  );
};
