import type { NextPage } from 'next';
import * as React from 'react';
import {useHuePulsate} from '@/hooks/effects';
import {IndexLayout} from '@/components/organisms/IndexLayout';
import {getFormValues} from '@theoryofnekomata/formxtra';

const IMAGE_CHOICES = [
  '/images/3cd237361eada7fd30eb96d42d55ec00.jpg',
  '/images/5ace16248237a96f6dbbcc16a3c385fe.jpg',
  '/images/6af0fdc5eafb86f8b540e3d322c3a007.jpg',
  '/images/8f5e3d92d2da0a760b312a9387219447.jpg',
  '/images/162cab44da8420c50900d8f11c6da6fd.jpg',
  '/images/2626c3485668a19730c64a7ee672a214.jpg',
  '/images/9802f260887e9044312fb7d88547fb09.jpg',
  '/images/a3a56f54a11c76f46f4392b748f3026a.png',
  '/images/a96d02d8cc43cc3b9f1e77c43dfa5644.png',
  '/images/d69ab7f4e5747b5b8f297e4ebe9770f5.png',
  '/images/d1454662da2a4a8e77cd4c98eda6d662.png',
  '/images/e4753cf6a55db6b7ab5037ed0fd4a3fe.jpg',
  '/images/fe3050a31d3fb86accf26cc4bebec102.png',
];

const makeSectionData = new Array(20).fill(null).map((_, index) => ({
  id: (index + 1).toString(),
  url: 'http://www.example.com',
  date: new Date('2023-07-03'),
  type: 'code',
  description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae diam eget nunc aliquam vestibulum. Sed vitae diam eget nunc aliquam vestibulum.',
}));

const envisionSectionData = new Array(6).fill(null).map((_, index) => ({
  id: (index + 1).toString(),
  url: 'http://www.example.com',
  imageUrl: 'http://placehold.it/1',
  title: 'Lorem ipsum dolor sit amet',
  description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae diam eget nunc aliquam vestibulum. Sed vitae diam eget nunc aliquam vestibulum.',
}));

const featuredProjectData = [
  {
    title: 'formxtra',
    description: "Extract and set form values through the DOM—no frameworks required!",
    links:[
      {
        href: 'https://codepen.io/theoryofnekomata/pen/xxajmvJ',
        children: 'View Demo',
      },
      {
        href: 'https://code.modal.sh/TheoryOfNekomata/formxtra',
        children: 'Explore Code',
        primary: true,
      },
    ],
    showcase: {
      type: 'iframe' as const,
      allowFullScreen: true,
      src: 'https://codepen.io/theoryofnekomata/embed/xxajmvJ?default-tab=result&theme-id=dark',
      sandbox: 'allow-forms allow-modals allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation-by-user-activation allow-downloads allow-presentation',
      allow: 'accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share',
    },
  },
  {
    title: 'tesseract',
    description: 'Functional, accessible, aesthetic design system.',
    links:[
      {
        href: 'https://code.modal.sh/tesseract-design/tesseract',
        children: 'Explore Code',
        primary: true,
      },
    ],
    showcase: {
      type: 'img' as const,
      src: '/images/162cab44da8420c50900d8f11c6da6fd.jpg',
    },
  },
  {
    title: 'numerica',
    description: 'Gets the name of a number, even if it\'s stupidly big.',
    links:[
      {
        href: 'https://code.modal.sh/modal-soft/numerica',
        children: 'Explore Code',
        primary: true,
      },
    ],
    showcase: {
      type: 'img' as const,
      src: '/images/d69ab7f4e5747b5b8f297e4ebe9770f5.png',
    },
  },
  {
    title: 'webvideo-transcript-summarizer',
    description: 'Get transcript summaries of Web videos. Powered by OpenAI.',
    links:[
      {
        href: 'https://code.modal.sh/modal-soft/webvideo-transcript-summary',
        children: 'Explore Code',
        primary: true,
      },
    ],
    showcase: {
      type: 'img' as const,
      src: '/images/3cd237361eada7fd30eb96d42d55ec00.jpg',
    },
  },
];

const IndexPage: NextPage = () => {
  useHuePulsate({
    propertyName: '--color-primary',
    initialColorHueDegrees: 320,
    colorSaturationPercentage: 35,
    colorLightnessPercentage: 66,
  });

  const processContactForm: React.FormEventHandler<HTMLFormElement> = (e) => {
    e.preventDefault();
    const values = getFormValues(e.currentTarget);
    console.log(values);
  };

  return (
    <IndexLayout
      backgroundImages={IMAGE_CHOICES}
      makeSectionData={makeSectionData}
      envisionSectionData={envisionSectionData}
      featuredProjectData={featuredProjectData}
      onSubmit={processContactForm}
    />
  );
};

export default IndexPage;
