import React, { useEffect, useState } from 'react';
import { Box, Button, Icon, Icons, Text, config, toRem } from 'folds';
import { Page, PageHero, PageHeroSection } from '../../components/page';
import PaarrotSVG from '../../../../public/res/svg/paarrot.svg';
import { getVersion } from '@tauri-apps/api/app';

export function WelcomePage() {
  const [version, setVersion] = useState<string>('');

  useEffect(() => {
    getVersion().then(setVersion).catch(() => setVersion(''));
  }, []);
  return (
    <Page>
      <Box
        grow="Yes"
        style={{ padding: config.space.S400, paddingBottom: config.space.S700 }}
        alignItems="Center"
        justifyContent="Center"
      >
        <PageHeroSection>
          <PageHero
            icon={<img width="70" height="70" src={PaarrotSVG} alt="Paarrot Logo" />}
            title="Welcome to Paarrot"
            subTitle={
              <span>
                Squawk to yer mateys! {' '}
                {version && (
                  <a
                    href="https://github.com/Paarrot/Paarrot-Desktop/releases/latest"
                    target="_blank"
                    rel="noreferrer noopener"
                  >
                    v{version}
                  </a>
                )}
              </span>
            }
          >
            <Box justifyContent="Center">
              <Box grow="Yes" style={{ maxWidth: toRem(300) }} direction="Column" gap="300">
                <Button
                  as="a"
                  href="https://github.com/Paarrot/Paarrot-Desktop"
                  target="_blank"
                  rel="noreferrer noopener"
                  before={<Icon size="200" src={Icons.Code} />}
                >
                  <Text as="span" size="B400" truncate>
                    Source Code
                  </Text>
                </Button>
              </Box>
            </Box>
          </PageHero>
        </PageHeroSection>
      </Box>
    </Page>
  );
}