import * as React from "react";
import {
  IconButton,
  Modal,
  ModalOverlay,
  ModalContent,
  ModalHeader,
  ModalBody,
  ModalCloseButton,
  useDisclosure,
  useColorMode,
  useTheme
} from "@chakra-ui/core";
import { motion, AnimatePresence } from "framer-motion";
import Markdown from "~/components/Markdown";

const AnimatedIcon = motion.custom(IconButton);

const HelpModal = ({ item, name }) => {
  const { isOpen, onOpen, onClose } = useDisclosure();
  const { colors } = useTheme();
  const { colorMode } = useColorMode();
  const bg = { light: "whiteFaded.50", dark: "blackFaded.800" };
  const color = { light: "black", dark: "white" };
  const iconColor = {
    light: colors.primary[500],
    dark: colors.primary[300]
  };
  return (
    <>
      <AnimatePresence>
        <AnimatedIcon
          initial={{ opacity: 0, scale: 0.3, color: colors.gray[500] }}
          animate={{ opacity: 1, scale: 1, color: iconColor[colorMode] }}
          transition={{ duration: 0.2 }}
          exit={{ opacity: 0, scale: 0.3 }}
          variantColor="primary"
          aria-label={`${name}_help`}
          icon="info-outline"
          variant="link"
          size="sm"
          h="unset"
          w={3}
          minW={3}
          maxW={3}
          h={3}
          minH={3}
          maxH={3}
          ml={1}
          mb={1}
          onClick={onOpen}
        />
      </AnimatePresence>
      <Modal isOpen={isOpen} onClose={onClose} size="xl">
        <ModalOverlay />
        <ModalContent
          bg={bg[colorMode]}
          color={color[colorMode]}
          py={4}
          borderRadius="md"
        >
          <ModalHeader>{item.params.title}</ModalHeader>
          <ModalCloseButton />
          <ModalBody>
            <Markdown content={item.content} />
          </ModalBody>
        </ModalContent>
      </Modal>
    </>
  );
};

export default HelpModal;