import { FC } from 'react';
import { Main } from '@/app/ui/Main';

import { authConfig } from "@/app/lib/auth";
import { SignInButton } from '../ui/SignInButton';
import Image from 'next/image';

type Provider = {
  id: string;
  name: string;
  type: string;
  style: {
    logo: string;
    bg: string;
    text: string;
  };
};

function getProviders(): Provider[] {
  const providerKeys: (keyof Provider)[] = ["id", "name", "type", "style"];
  return authConfig.providers.map((provider) =>
    getKeyValuesFromObject<Provider>(provider, providerKeys)
  );
}

function getKeyValuesFromObject<T>(obj: any, keys: (keyof T)[]): T {
  return keys.reduce((acc, key) => {
    if (obj[key]) {
      acc[key] = obj[key];
    }
    return acc;
  }, {} as T);
}

const Page:FC = async () => {

  const providers = await getProviders()

 return (
    <Main>
      <h1 className="text-3xl font-bold text-center">
        <span className="text-neutral-50 mr-3">Which bills are due?</span>
        <span className="text-indigo-400">Which are payed?</span>
        <span className="text-neutral-50 ml-3">How much are my expenses?</span>
      </h1>
      <p className="p mt-[1em] text-center">These are the questions this simple and free app will help you with ...</p>
      <p className="p mb-[1em] text-center">... try it & use it completly free!</p>
      <span className="text-center">
      {
        Object.values(providers).map((provider) => (
          <div key={provider.name}>
            <SignInButton provider={provider} />
          </div>
        ))
      }
      </span>
      <video className="m-auto mt-4" title="Demo osnovnih koraka u aplikaciji" role="img" data-js-id="hero" loop muted playsInline autoPlay poster="hero.png">
        <source src="/welcome-demo-vp9-25fps-1500bps.webm" type="video/webm" />
      </video>
      <h1 className="text-2xl font-bold text-neutral-50 my-5">Easy copy of expenditures</h1>
      <p className="p mt-[1em]">All your realestate and utilitys are automatically copied to the next month, so you don&apos;t neeed to do it by hand.</p>
      <video className="m-auto mt-4" title="Demo kopiranja mjeseca" role="img" data-js-id="hero" loop muted playsInline autoPlay poster="bar-code-demo.png">
        <source src="/kopiranje-mjeseca-demo.webm" type="video/webm" />
      </video>

      <h1 className="text-2xl font-bold text-neutral-50 my-5">Color signals status</h1>
      <p className="p mt-[1em]">Each of trhe utility bills is color coded - at a glance you can see which bill was received and which one is payed.</p>
      <Image src="/status-color-demo.png" alt="Boje označavaju status računa" className="m-auto mt-4" width={423} height={145} />

      <h1 className="text-2xl font-bold text-neutral-50 my-5">Extraction of 2D bar code</h1>
      <p className="p mt-[1em]">If the attached dokument contains a 2D bar code, it is automatically extracted and shown on the page, so you can scan it without opening the PDF document.</p>
      <video className="m-auto mt-4" title="Demo generiranja 2D bar koda" role="img" data-js-id="hero" loop muted playsInline autoPlay poster="bar-code-demo.png">
        <source src="/bar-code-demo.webm" type="video/webm" />
      </video>
    </Main>
  );
}

export default Page;