import Job, { type JobProps } from '../components/Job'
import Skill, { type SkillProps } from '../components/Skill'
import ListItem, { type ListItemProps } from '../components/ListItem'
import Head from 'next/head'
import { UsefulLinksList } from '../components/UsefulLinks/index'
import { SocialLinksList } from '../components/SocialLinks/SocialLinks'
import type { GetStaticProps } from 'next'
import { Border } from 'components/Border'

interface LandingProps {
  jobs: JobsType[]
  skills: SkillsType[]
  projects: ProjectsType[]
}

export default function Landing({ jobs, skills, projects }: LandingProps) {
  return (
    <div>
      <Head>
        <body className="bg-gradient-to-b from-slate-900 to-slate-950 container max-w-full mx-auto text-gray-300 py-24 px-4 w-full sm:px-20 md:px-16" />
      </Head>

      <main className="flex flex-col-reverse gap-8 md:grid md:grid-cols-8">
        <aside className="md:col-start-1 md:col-span-3 lg:col-span-2">
          <div className='sticky top-10 flex flex-col gap-4'>
            <section className="row-span-1 col-span-6" >
              <h2 className="mt-1">Useful Links</h2>
              <UsefulLinksList />
            </section>

            <section className="hidden sm:grid grid-rows-3 col-start-1 col-span-6 row-span-1" >
              <div className="row-span-1">
                <SocialLinksList />
              </div>
            </section>
          </div>
        </aside>

        <section className=" flex gap-1 flex-col md:col-start-4 col-span-5 lg:col-start-3 xl:col-span-4">
          <article>
            <div className="flex flex-col gap-2">
              <div className="flex gap-4 items-center">
                <img className="inline-block h-10 w-10 rounded-full ring-2 ring-white"
                  src="https://gitlab.com/uploads/-/system/user/avatar/5083849/avatar.png?width=400" alt="" />
                <h1 className="text-2xl font-bold">Triston Armstrong</h1>
              </div>
              <p className="text-sm">Full Stack Software Developer @ <a href="ventrahealth.com"
                className="text-blue-500">VentraHealth</a></p>
              <div className="w-full border-dashed border-slate-500  my-4 border "></div>
              <p className="text-sm">I am a self taught Full Stack Software Developer with an unhealthy addiction to solving
                problems using code.</p>

              <section className="sm:hidden" >
                <div className="row-span-1  ">
                  <SocialLinksList />
                </div>
              </section>
              <Border className="sm:hidden" />
            </div>
          </article>

          <article>
            <h2 className="text-1xl font-bold uppercase">Skills</h2>
            <div className="flex gap-2 py-4" id="skills">
              {skills.map(skill => <Skill key={skill.label} label={skill.label} />)}
            </div>
          </article>

          <article>
            <h2 className="text-1xl font-bold uppercase">Jobs</h2>
            <div className="flex flex-col gap-3 py-4" id="jobs">
              {jobs.map(job => <Job key={job.name} logo={job.logo} name={job.name} details={job.details} dateFrom={job.dateFrom} dateTo={job.dateTo} />)}
            </div>
          </article>

          <article>
            <h2 className="text-1xl font-bold uppercase">Personal Projects</h2>
            <div className="flex flex-col gap-1 py-4" id="projects">
              {projects.map(project => <ListItem key={project.label} label={project.label} date={project.date} url={project.url} />)}
            </div>
          </article>

          <article>
            <h2 className="text-1xl font-bold uppercase">Notes</h2>
            <p>An endless trail of links to my personal notes</p>
            <a href="/notes" target="_blank">Go To Notes {'->'}</a>
          </article>
        </section>
      </main>
    </div>
  )
}

export function getStaticProps(): ReturnType<GetStaticProps<{
  projects: ProjectsType[]
  skills: SkillsType[]
  jobs: JobsType[]
}>> {
  return {
    props: {
      projects: [
        { label: 'Web Window Manager', date: '9/18/2022', url: 'https://github.com/tristonarmstrong/web-window-manager' },
        { label: 'Component Test Helper', date: '6/18/2022', url: 'https://github.com/tristonarmstrong/component-test-helper' },
        { label: 'Hive DAPP', date: '3/8/2022', url: 'https://github.com/tristonarmstrong/hive-dapp' },
        { label: 'Kivy Twisted Input Capture', date: '6/27/2021', url: 'https://github.com/tristonarmstrong/KivyTwistedInputCapture' },
        { label: 'Plant Monitor Node MCU', date: '6/27/2021', url: 'https://github.com/tristonarmstrong/PlantMonitorNodeMCU' },
        { label: 'Oppo BDP 103 CLI', date: '4/10/2021', url: 'https://github.com/tristonarmstrong/oppo_bdp_103_CLI' },
        { label: 'Sony Bravia Pro Server', date: '4/10/2021', url: 'https://github.com/tristonarmstrong/sony_bravia_pro_display_mock_server' },
        { label: 'Chat IO', date: '6/10/2020', url: 'https://github.com/tristonarmstrong/chat.io' },
        { label: 'Solar Battery Monitor API', date: '7/18/2023', url: 'https://github.com/tristonarmstrong/SolarBatteryMonitorApi' },
        { label: 'Zip Code Distance App', date: '1/28/2020', url: 'https://github.com/tristonarmstrong/zipapp' },
        { label: 'Armstrong Editor', date: '12/14/2022', url: 'https://github.com/tristonarmstrong/armstrong-editor' }
      ],
      skills: [
        { label: 'Typescript' },
        { label: 'Python' },
        { label: 'Rust' },
        { label: 'Javascript' }
      ],
      jobs: [
        {
          logo: 'https://ventrahealth.com/wp-content/uploads/2023/08/cropped-Ventra-Health-favicon-circle-192x192.png',
          name: 'Ventra Health',
          details: 'Maintaining and iterating on an internal web application',
          dateFrom: 'May 2023',
          dateTo: 'Present'
        }, {
          logo: 'https://www.randstadusa.com/themes/custom/bluex/favicon.ico',
          name: 'Randstad Technologies',
          details: 'Built Web Applications for external clients',
          dateFrom: 'May 2022',
          dateTo: 'May 2023'

        }, {
          logo: 'https://img1.wsimg.com/isteam/ip/9ba626a3-41c9-4092-90b5-cb351983b726/favicon/a8beec51-e35d-4cca-8e88-befa12f687b0.png/:/rs=w:64,h:64,m',
          name: 'Damiano Global Corporation',
          details: 'Built Web Applications for external clients',
          dateFrom: 'July 2020',
          dateTo: 'Nov 2021'

        }, {
          logo: '#',
          name: 'Makers Ladder LLC',
          details: 'Did some thangs',
          dateFrom: 'Dec 2019',
          dateTo: 'Apr 2022'

        }
      ]
    }
  }
}

type SkillsType = SkillProps
type JobsType = JobProps
type ProjectsType = ListItemProps


