import Journey from "@/Journey";
import { LinearSpeacialistBar } from "@/SpecialistBar";
import type { NextPage } from "next";
import Head from "next/head";
import { useState } from "react";
import Gravatar from "react-gravatar";


const specialistPageSize = 12;
const Resume: NextPage = () => {

    const [specialistLimitSize, setSpecialistLimitSize] = useState(specialistPageSize)


    const loadMore = () => {
        if (thoseWhatIknowAndFamiliarAndSpecialistAt.length - specialistPageSize > specialistLimitSize)
            setSpecialistLimitSize(specialistLimitSize + specialistPageSize)
        else
            setSpecialistLimitSize(thoseWhatIknowAndFamiliarAndSpecialistAt.length)
    }

    const thoseWhatIknowAndFamiliarAndSpecialistAt = [
        {
            title: "HTML",
            percent: 100,
        },
        {
            title: "CSS",
            percent: 60,
        },
        {
            title: "Web3",
            percent: 60,
        },
        {
            title: "Javascript",
            percent: 100,
        },
        {
            title: "Typescript",
            percent: 90,
        },
        {
            title: "Reactjs",
            percent: 100,
        },
        {
            title: "Nextjs",
            percent: 90,
        },
        {
            title: "Vuejs",
            percent: 80,
        },
        {
            title: "Rust",
            percent: 70
        },
        {
            title: "Nuxtjs",
            percent: 80,
        },
        {
            title: "Go",
            percent: 60,
        },
        {
            title: "MongoDB",
            percent: 80,
        },
        {
            title: "Docker",
            percent: 100,
        },
        {
            title: "K8s",
            percent: 60,
        },
        {
            title: "WebRTC",
            percent: 60,
        },
        {
            title: "Kafka",
            percent: 80,
        },
        {
            title: "Elastic search",
            percent: 95,
        },
        {
            title: "Java",
            percent: 100,
        },
        {
            title: "Python",
            percent: 100,
        },
        {
            title: "Tailwindcss",
            percent: 100,
        },
        {
            title: "Unity",
            percent: 50,
        },
        {
            title: "Linux",
            percent: 90,
        },
        {
            title: "Bash",
            percent: 60,
        },
        {
            title: "Postgresql",
            percent: 60,
        },
        {
            title: "Express",
            percent: 95,
        },
        {
            title: "NodeJs",
            percent: 95,
        },
        {
            title: "Solidity",
            percent: 50,
        },
        {
            title: "ERC20",
            percent: 50,
        },
        {
            title: "YAML",
            percent: 100,
        },
        {
            title: "Redis",
            percent: 100,
        },
        {
            title: "RabbitMQ",
            percent: 80,
        },
        {
            title: "SEO",
            percent: 60,
        },
        {
            title: "Laravel",
            percent: 60,
        },
        {
            title: "PHP",
            percent: 80,
        },
        {
            title: "MySQL",
            percent: 90,
        },
        {
            title: "Sqlite",
            percent: 100,
        },
        {
            title: "Nginx",
            percent: 90,
        },
        {
            title: "gRPC",
            percent: 50,
        },
        {
            title: "Rest",
            percent: 100,
        },
        {
            title: "oAuth",
            percent: 80,
        },
        {
            title: "Googling",
            percent: 100,
        },
        {
            title: "GraphQL",
            percent: 60,
        },
        {
            title: "actix",
            percent: 80,
        },
        {
            title: "WebSocket",
            percent: 100,
        },
        {
            title: "Kibana",
            percent: 60,
        },
        {
            title: "jQuery",
            percent: 60,
        },
        {
            title: "NodeRed",
            percent: 80,
        },
        {
            title: "Bootstrap",
            percent: 90,
        },
        {
            title: "SysAdmin",
            percent: 80,
        },
        {
            title: "SpringBoot",
            percent: 90,
        },
        {
            title: "Jira",
            percent: 100,
        },
        {
            title: "Bamboo",
            percent: 100,
        },
        {
            title: "Git",
            percent: 100,
        },
        {
            title: "Gitlab CI",
            percent: 100,
        },
        {
            title: "STOMP",
            percent: 90,
        },
        {
            title: "PWA",
            percent: 100,
        },
        {
            title: "Docker Swarm",
            percent: 100,
        },
    ].sort((a, b) => a.percent === b.percent ? a.title.localeCompare(b.title) : b.percent - a.percent)

    const projects = [
        {
            title: "Baladam",
            tags: ["nuxtjs", "java", "springboot", "mongodb", "elastic", "redis", "rust", "rabbitmq"],
            description: "Hire the freelancers for any job, online.",
            year: 2019,
            url: "https://mucut.ir",
            isLunched: false
        },
        {
            title: "Mucut",
            tags: ["nuxtjs", "python", "mysql", "nginx", "pm2"],
            description: "Find & book beauty services like hairdressing, manicure, spa or massage.",
            year: 2020,
            url: "https://mucut.ir",
            isLunched: true
        },
        {
            title: "!mixsome",
            tags: ["reactjs", "web3"],
            description: "Approval manager dashboard and revoking approvals ",
            year: 2022,
            url: "https://dapp.mixsomecash.com",
            isLunched: true
        },
        {
            title: "Yaus",
            tags: ["rust", "actix", "mongodb"],
            description: "Free URL shortener and link services",
            year: 2021,
            url: "https://yaus.ir",
            isLunched: true
        },
        {
            title: "Mafia Game",
            tags: ["nodejs", "redis", "reactjs", "sqlite"],
            description: "Mafia Game (werewolf)",
            year: 2021,
            url: "https://mafia.game.igarson.app",
            isLunched: true
        },
        {
            title: "iGarson",
            tags: ["springboot", "stomp", "reactjs", "nextjs", "mongodb", "pg", ".net", "pwa", "rabbitmq", "docker swarm", "elastic", "redis"],
            description: "iGarson is a first smart resturant assistance infestracture",
            year: 2022,
            url: "https://igarson.app",
            isLunched: true
        }

    ].sort((a, b) => b.year - a.year)



    return (
        <>
            <Head>
                <title>
                    رزومه امیرحسین مقیسه
                </title>
            </Head>
            <div className="flex flex-col lg:grid lg:grid-flow-row lg:grid-cols-5 p-2 text-secondary">
                <div className="col-span-1 h-full bg-light-primary">
                    <div className="flex flex-col w-full">
                        <div className="flex flex-col p-3 bg-dark-primary rounded-xl">
                            <div className="text-center mx-auto">
                                <Gravatar email="siramirmoghi3@gmail.com" className="rounded-full" title="amirmoghi3" height={"85px"} width={"85px"} />
                            </div>
                            <h1 className="text-2xl text-white text-center mt-3">Amirmoghi3</h1>
                            <h2 className="text-xl text-white text-center mt-3">Amir Hossein Moghiseh</h2>
                            <h3 className="text-xs text-secondary text-center opacity-60">PM4D | Web3 Developer | Devops Specialist | Web Engineer</h3>
                        </div>
                        <div className="flex flex-col bg-light-primary p-3 text-xs">
                            <div className="flex flex-row justify-between py-2 text-center">
                                <span className="text-white text-ellipsis ">Residence :</span>
                                <span className="text-white opacity-60">Iran</span>
                            </div>
                            <div className="flex flex-row justify-between py-2 text-center">
                                <span className="text-white ">City :</span>
                                <span className="text-white opacity-60">Tehran</span>
                            </div>
                            <div className="flex flex-row justify-between py-2 text-center">
                                <span className="text-white text-ellipsis">Birthday :</span>
                                <span className="text-white  text-ellipsis opacity-60">Aug/26/1998</span>
                            </div>
                            <div className="flex flex-row justify-between py-2 text-center">
                                <span className="text-white text-ellipsis">Experiance :</span>
                                <span className="text-white  text-ellipsis opacity-60">2016</span>
                            </div>
                        </div>
                        <div className="flex flex-col p-3">
                            {
                                thoseWhatIknowAndFamiliarAndSpecialistAt.slice(1, specialistLimitSize).map(occupation => (
                                    <LinearSpeacialistBar key={occupation.title} percent={occupation.percent} title={occupation.title} />
                                ))
                            }
                            {
                                thoseWhatIknowAndFamiliarAndSpecialistAt.length > specialistLimitSize &&
                                <span onClick={loadMore} className="mt-5 text-white text-sm opacity-50 hover:opacity-80  text-left cursor-pointer">
                                    Load More ...
                                </span>

                            }
                        </div>
                    </div>
                </div>
                <div className="lg:col-span-4 h-full flex flex-col px-5 text-center w-full bg-light-primary">
                    {/* <div className="bg-secondary flex flex-row p-5 h-72 text-dark-primary rounded-xl ">
                    <div>
                        <p className="text-xl">
                            Discover My Amazing Journay!
                        </p>
                        <p>
                            {"<code>"} Look At My Amazing Journay . {"</code>"}
                        </p>
                    </div>
                </div> */}

                    <div className="flex flex-row flex-wrap ">
                        {projects.map(project => (
                            <Journey key={project.title} title={project.title} tags={project.tags} description={project.description} year={project.year} url={project.url} isLunched={project.isLunched} />
                        ))}
                    </div>
                </div>
            </div>
        </>
    )

}

export default Resume;