/**
 *  External Dependencies
 */
import {
  AspectRatio,
  Box,
  Button,
  ButtonGroup,
  Grid,
  Heading,
  HStack,
  Link,
  Stack,
  Text
} from "@chakra-ui/react";
import { __ } from "@wordpress/i18n";
import React from "react";

/**
 *  Internal Dependencies
 */
import * as Icon from "../../components/Icon/Icon";
import UsefulPlugins from "./components/UsefulPlugins";

const Dashboard = () => {
  /* global _EVF_DASHBOARD_ */
  const { newFormURL, allFormsURL, utmCampaign } =
    typeof _EVF_DASHBOARD_ !== "undefined" && _EVF_DASHBOARD_;

  const helpURL =
      "https://docs.everestforms.net/?utm_source=dashboard-dashboard&utm_medium=sidebar-link&utm_campaign=" +
      utmCampaign,
    featureRequestURL =
      "https://everestforms.net/feature-requests/?utm_source=dashboard-dashboard&utm_medium=sidebar-link&utm_campaign=" +
      utmCampaign,
	  supportURL ="https://everestforms.net/support/?utm_source=dashboard-dashboard&utm_medium=sidebar-link&utm_campaign=" +
      utmCampaign;

  return (
    <Grid
      my="8"
      mx="6"
      gridGap="5"
      gridTemplateColumns={{
        sm: "1fr",
        md: "3fr 1fr"
      }}
    >
      <Stack gap="5">
        <Box
          p="6"
          borderRadius="base"
          border="1px"
          borderColor="gray.100"
          bgColor="white"
        >
          <Heading as="h3" mb="5" fontSize="2xl" fontWeight="semibold">
            {__("Welcome to Everest Forms!", "everest-forms")}
          </Heading>
          <AspectRatio ratio={16 / 9}>
            <iframe
              src="https://www.youtube.com/embed/AvK0KU2ycqc?autoplay=1&mute=1&rel=0"
              title="YouTube video player"
              style={{
                borderRadius: "11px",
                border: "none",
                overflow: "hidden"
              }}
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              allowFullScreen
            />
          </AspectRatio>
          <ButtonGroup mt="5" spacing="6">
            <Button
              as={Link}
              colorScheme="primary"
              fontSize="14px"
              fontWeight="normal"
              borderRadius="base"
              color="white !important"
              textDecor="none !important"
              py="3"
              px="6"
              href={newFormURL}
            >
              {__("Create a Contact Form", "everest-forms")}
            </Button>
            <Button
              as={Link}
              variant="outline"
              colorScheme="primary"
              borderRadius="base"
              fontSize="14px"
              fontWeight="normal"
              href={allFormsURL}
              textDecor="none !important"
              isExternal
            >
              {__("View all forms", "everest-forms")}
            </Button>
          </ButtonGroup>
        </Box>
      </Stack>
      <Stack gap="5">
        <Stack
          p="4"
          gap="3"
          bgColor="white"
          borderRadius="base"
          border="1px"
          borderColor="gray.100"
        >
          <HStack gap="2">
            <Icon.Team w="5" h="5" fill="primary.500" />
            <Heading as="h3" size="sm" fontWeight="semibold">
              {__("Everest Forms Community", "everest-forms")}
            </Heading>
          </HStack>
          <Text fontSize="13px" color="gray.700">
            {__(
              "Join our exclusive group and connect with fellow Everest Forms members. Ask questions, contribute to discussions, and share feedback!",
              "everest-forms"
            )}
          </Text>
          <Link
            color="var(--chakra-colors-primary-500) !important"
            textDecor="underline"
            href="https://www.facebook.com/groups/everestforms"
            isExternal
          >
            {__("Join our Facebook Group", "everest-forms")}
          </Link>
        </Stack>
        <Stack
          p="4"
          gap="3"
          bgColor="white"
          borderRadius="base"
          border="1px"
          borderColor="gray.100"
        >
          <HStack gap="2">
            <Icon.DocsLines w="5" h="5" fill="primary.500" />
            <Heading as="h3" size="sm" fontWeight="semibold">
              {__("Getting Started", "everest-forms")}
            </Heading>
          </HStack>
          <Text fontSize="13px" color="gray.700">
            {__(
              "Check our documentation for detailed information on Everest Forms features and how to use them.",
              "everest-forms"
            )}
          </Text>
          <Link
            color="var(--chakra-colors-primary-500) !important"
            textDecor="underline"
            href={helpURL}
            isExternal
          >
            {__("View Documentation", "everest-forms")}
          </Link>
        </Stack>
        <Stack
          p="4"
          gap="3"
          bgColor="white"
          borderRadius="base"
          border="1px"
          borderColor="gray.100"
        >
          <HStack gap="2">
            <Icon.Headphones w="5" h="5" fill="primary.500" />
            <Heading as="h3" size="sm" fontWeight="semibold">
              {__("Support", "everest-forms")}
            </Heading>
          </HStack>
          <Text fontSize="13px" color="gray.700">
            {__(
              "Submit a ticket for encountered issues and get help from our support team instantly.",
              "everest-forms"
            )}
          </Text>
          <Link
            color="var(--chakra-colors-primary-500) !important"
            textDecor="underline"
            href={supportURL}
            isExternal
          >
            {__("Create a Ticket", "everest-forms")}
          </Link>
        </Stack>
        <Stack
          p="4"
          gap="3"
          bgColor="white"
          borderRadius="base"
          border="1px"
          borderColor="gray.100"
        >
          <HStack gap="2">
            <Icon.Bulb w="5" h="5" fill="primary.500" />
            <Heading as="h3" size="sm" fontWeight="semibold">
              {__("Feature Request", "everest-forms")}
            </Heading>
          </HStack>
          <Text fontSize="13px" color="gray.700">
            {__(
              "Don’t find a feature you’re looking for? Suggest any features you think would enhance our product.",
              "everest-forms"
            )}
          </Text>
          <Link
            color="var(--chakra-colors-primary-500) !important"
            textDecor="underline"
            href={featureRequestURL}
            isExternal
          >
            {__("Request a Feature", "everest-forms")}
          </Link>
        </Stack>
        <Stack
          p="4"
          gap="3"
          bgColor="white"
          borderRadius="base"
          border="1px"
          borderColor="gray.100"
        >
          <HStack gap="2">
            <Icon.Star w="5" h="5" fill="primary.500" />
            <Heading as="h3" size="sm" fontWeight="semibold">
              {__("Submit a Review", "everest-forms")}
            </Heading>
          </HStack>
          <Text fontSize="13px" color="gray.700">
            {__(
              "Please take a moment to give us a review. We appreciate honest feedback that’ll help us improve our plugin.",
              "everest-forms"
            )}
          </Text>
          <Link
            color="var(--chakra-colors-primary-500) !important"
            textDecor="underline"
            href="https://wordpress.org/support/plugin/everest-forms/reviews/?rate=5#new-post"
            isExternal
          >
            {__("Submit a Review", "everest-forms")}
          </Link>
        </Stack>
        <Stack
          p="4"
          gap="3"
          bgColor="white"
          borderRadius="base"
          border="1px"
          borderColor="gray.100"
        >
          <HStack gap="2">
            <Icon.Video w="5" h="5" fill="primary.500" />
            <Heading as="h3" size="sm" fontWeight="semibold">
              {__("Video Tutorials", "everest-forms")}
            </Heading>
          </HStack>
          <Text fontSize="13px" color="gray.700">
            {__(
              "Watch our step-by-step video tutorials that’ll help you get the best out of Everest Forms’s features.",
              "everest-forms"
            )}
          </Text>
          <Link
            color="var(--chakra-colors-primary-500) !important"
            textDecor="underline"
            isExternal
            href="https://www.youtube.com/@EverestForms"
          >
            {__("Watch Videos", "everest-forms")}
          </Link>
        </Stack>
      </Stack>
    </Grid>
  );
};

export default Dashboard;