import { Button, Flex, Link, WrapItem, Text, Wrap } from "@chakra-ui/react";
import download from "downloadjs";
import JSZip from "jszip";
import { Download, Github } from 'lucide-react';
import { IconCustomizerDrawer } from "./IconCustomizerDrawer";

function generateZip(icons) {
  const zip = new JSZip();
  Object.values(icons).forEach((icon) =>
    // @ts-ignore
    zip.file(`${icon.name}.svg`, icon.src)
  );
  return zip.generateAsync({ type: 'blob' });
}

const Header = ({ data }) => {
  const downloadAllIcons = async () => {

    const zip = await generateZip(data);
    download(zip, 'feather.zip');
  };

  const repositoryUrl = 'https://github.com/lucide-icons/lucide';

  return (
    <Flex direction="column" align="center" justify="center">
      <Text fontSize="4xl" as="b" mb="4" textAlign="center">
        Simply beautiful open source icons, community-sourced
      </Text>
      <Text fontSize="lg" as="p" textAlign="center" mb="8">
        An open-source icon library, a fork of <Link href="https://github.com/feathericons/feather" isExternal>Feather Icons</Link>. <br/>We're expanding the icon set as much as possible while keeping it nice-looking - <Link href={repositoryUrl} isExternal>join us</Link>!
      </Text>
      <Wrap
        marginTop={3}
        marginBottom={10}
        spacing="15px"
        justify="center"
      >
        <WrapItem>
          <Button
            leftIcon={<Download/>}
            size="lg"
            onClick={downloadAllIcons}
          >
            Download all
          </Button>
        </WrapItem>
        <WrapItem>
        <IconCustomizerDrawer/>
        </WrapItem>
        <WrapItem>
        <Button
          as="a"
          leftIcon={<Github/>}
          size="lg"
          href={repositoryUrl}
          target="__blank"
          onClick={downloadAllIcons}
        >
          Github
        </Button>
        </WrapItem>
      </Wrap>
    </Flex>
  )
};

export default Header;
