import React, {FunctionComponent} from 'react';
import Section from '../../components/section/Section';
import Center from '../../components/central/Center';
import GridLayout from 'react-grid-layout';
import styled from 'styled-components';
import PerfectScrollbar from 'react-perfect-scrollbar';
import {Localized} from '../../contexts/language-context/LanguageContext';
import {
    FontWeight,
    H0,
    H2,
    H3,
    P,
    P2,
    TextAlign,
} from '../../components/text/TextComponents';
import {addProps} from '../../utils/ComponentUtils';
import {DefaultTheme, IStyleArgument} from '../../styles/theme';
import Button from '../../components/button/Button';
import ElevatedBox from '../../components/elevated-box/ElevatedBox';
import Link from 'next/link';

const VertCent = styled(addProps<{valign: string}>()(styled.div``))`
    margin: auto;
    display: inline-block;
    vertical-align: ${(p) => p.valign};
    width: calc(100% - 2px);
`;

const layout = [
    {
        i: 'grid0',
        x: 0,
        y: 0,
        w: 11,
        h: 8,
        c: 'rgba(238, 148, 146, 255)',
        static: true,
        valign: 'middle',
        content: (
            <>
            <Localized lang={'pl'}>
                <H3 mobileDownscale={false}>Dostać się na</H3>
            </Localized>
            <Localized lang={'en'}>
                <H3 mobileDownscale={false}>Get into</H3>
            </Localized>
            </>
        ),
    },
    {
        i: 'grid1',
        x: 11,
        y: 0,
        w: 8,
        h: 11,
        c: 'rgba(1, 76, 1, 255)',
        static: true,
        valign: 'top',
        content: (
            <Localized lang={'pl'}>
                <H3 mobileDownscale={false} color={'white'}>
                    Pasjonuje mnie
                    <br />
                    algorytmika, chcę
                    <br />
                    się z niej rozwijać
                </H3>
            </Localized>
        ),
    },
    {
        i: 'grid2',
        x: 19,
        y: 0,
        w: 16,
        h: 7,
        c: 'rgba(205, 169, 33, 255)',
        static: true,
        valign: 'middle',
        content: (
            <Localized lang={'pl'}>
                <H3 mobileDownscale={false} color={'white'}>
                    Złoty medal na Olimpiadzie Informatycznej
                </H3>
            </Localized>
        ),
    },
    {
        i: 'grid3',
        x: 35,
        y: 0,
        w: 4,
        h: 15,
        c: 'rgba(120, 133, 137, 255)',
        static: true,
        valign: 'top',
        content: (
            <Localized lang={'pl'}>
                <H3
                    mobileDownscale={false}
                    weight={FontWeight.Bold}
                    noMargin
                    color={'white'}
                    style={{
                        writingMode: 'vertical-rl',
                        transform: 'rotate(180deg) translate(0, -60px)',
                    }}>
                    Chcę stworzyć
                    <br />
                    własną aplikację
                </H3>
            </Localized>
        ),
    },
    {
        i: 'grid4',
        x: 39,
        y: 0,
        w: 8,
        h: 10,
        c: 'rgba(217, 66, 213, 255)',
        static: true,
        valign: 'top',
        content: (
            <Localized lang={'pl'}>
                <H3 mobileDownscale={false}>
                    Chcę nauczyć
                    <br />
                    się robić gry w<br />
                    3D
                </H3>
            </Localized>
        ),
    },
    {
        i: 'grid5',
        x: 47,
        y: 0,
        w: 7,
        h: 5,
        c: 'rgba(0, 0, 0, 255)',
        static: true,
        valign: 'top',
        content: (
            <Localized lang={'pl'}>
                <H3 mobileDownscale={false} noMargin>

                    Chciałbym mieć
                    <br />
                    staż w FAANG na
                    <br />
                    studiach
                </H3>
            </Localized>
        ),
    },
    {
        i: 'grid6',
        x: 54,
        y: 0,
        w: 3,
        h: 10,
        c: 'rgba(232, 232, 233, 255)',
        static: true,
        valign: 'top',
        content: (
            <Localized lang={'pl'}>
                <P2
                    mobileDownscale={false}
                    weight={FontWeight.Bold}
                    noMargin
                    style={{
                        writingMode: 'vertical-rl',
                        transform: 'rotate(180deg) translate(7px, -40px)',
                    }}>
                    Chcę pracować
                    <br />
                    naukowo i<br />
                    rozwijać nowe
                    <br />
                    technologie
                </P2>
            </Localized>
        ),
    },
    {
        i: 'grid7',
        x: 57,
        y: 0,
        w: 11,
        h: 6,
        c: 'rgba(47, 175, 203, 255)',
        static: true,
        valign: 'top',
        content: (
            <Localized lang={'pl'}>
                <P mobileDownscale={false} weight={FontWeight.Bold} noMargin>
                    Popracować nad logicznym
                    <br />
                    myśleniem, nauczyć się szybciej
                    <br />
                    rozwiązywać problemy
                </P>
            </Localized>
        ),
    },
    {
        i: 'grid8',
        x: 68,
        y: 0,
        w: 6,
        h: 6,
        c: 'rgba(181, 145, 137, 255)',
        static: true,
        valign: 'top',
        content: (
            <Localized lang={'pl'}>
                <P mobileDownscale={false} weight={FontWeight.Bold} noMargin>
                    Chcę rozwijać
                    <br />
                    kreatywne
                    <br /> myślenie
                </P>
            </Localized>
        ),
    },
    {
        i: 'grid9',
        x: 74,
        y: 0,
        w: 10,
        h: 6,
        c: 'rgba(145, 45, 51, 255)',
        static: true,
        valign: 'top',
        content: (
            <>
            <Localized lang={'pl'}>
                <H3 mobileDownscale={false} noMargin>
                    Chcę
                    <br />
                    studiować na
                    <br />
                    Harvardzie
                </H3>
            </Localized>
            <Localized lang={'en'}>
            <H3 mobileDownscale={false} noMargin>
                I want to
                <br />
                study at
                <br />
                Harvard
            </H3>
            </Localized>
            </>
        ),
    },
    {
        i: 'grid10',
        x: 84,
        y: 0,
        w: 7,
        h: 6,
        c: 'rgba(123, 197, 126, 255)',
        static: true,
        valign: 'top',
        content: (
            <Localized lang={'pl'}>
                <P
                    mobileDownscale={false}
                    color={'white'}
                    weight={FontWeight.Bold}
                    noMargin>
                    Chcę być dobrym programistą który pomaga ludziom
                </P>
            </Localized>
        ),
    },
    {
        i: 'grid11',
        x: 91,
        y: 0,
        w: 7,
        h: 9,
        c: 'rgba(142, 80, 74, 255)',
        static: true,
        valign: 'top',
        content: (
            <Localized lang={'pl'}>
                <H3 mobileDownscale={false} noMargin>
                    Chcę ćwiczyć programowanie żeby dostać się na dobry
                    internship
                </H3>
            </Localized>
        ),
    },
    {
        i: 'grid12',
        x: 47,
        y: 5,
        w: 7,
        h: 5,
        c: 'rgba(155, 213, 216, 255)',
        static: true,
        valign: 'top',
        content: (
            <Localized lang={'pl'}>
                <H3 mobileDownscale={false}>Chcę nauczyć się robić gry</H3>
            </Localized>
        ),
    },
    {
        i: 'grid13',
        x: 57,
        y: 6,
        w: 9,
        h: 6,
        c: 'rgba(208, 75, 152, 255)',
        static: true,
        valign: 'middle',
        content: (
            <Localized lang={'pl'}>
                <P mobileDownscale={false} weight={FontWeight.Bold} noMargin>
                    Chcę nauczyć sie programować i mieć dobre CV jak pójdę na
                    studia
                </P>
            </Localized>
        ),
    },
    {
        i: 'grid14',
        x: 66,
        y: 6,
        w: 4,
        h: 14,
        c: 'rgba(244, 188, 210, 255)',
        static: true,
        valign: 'bottom',
        content: (
            <Localized lang={'pl'}>
                <img
                    style={{
                        width: '70%',
                        marginLeft: 15,
                    }}
                    src={'/images/grid/OF.svg'}
                    alt={'Chcę dostać się do finału OF'}
                />
            </Localized>
        ),
    },
    {
        i: 'grid15',
        x: 70,
        y: 6,
        w: 7,
        h: 5,
        c: 'rgba(61, 178, 187, 255)',
        static: true,
        valign: 'top',
        content: (
            <Localized lang={'pl'}>
                <P2
                    mobileDownscale={false}
                    color={'white'}
                    weight={FontWeight.Bold}
                    noMargin>
                    Chciałbym osiągnąć coś specjalnego w życiu
                </P2>
            </Localized>
        ),
    },
    {
        i: 'grid16',
        x: 77,
        y: 6,
        w: 8,
        h: 11,
        c: 'rgba(166, 132, 37, 255)',
        static: true,
        valign: 'bottom',
        content: (
            <Localized lang={'pl'}>
                <H2 mobileDownscale={false} noMargin color={'white'}>
                    Chcę stworzyć
                    <br />i sprzedać
                    <br />
                    swój startup
                </H2>
            </Localized>
        ),
    },
    {
        i: 'grid17',
        x: 85,
        y: 6,
        w: 6,
        h: 10,
        c: 'rgba(102, 231, 214, 255)',
        static: true,
        valign: 'top',
        content: (
            <Localized lang={'pl'}>
                <H3 mobileDownscale={false} noMargin>
                    Chciałabym odnaleźć swój ukryty talent
                </H3>
            </Localized>
        ),
    },
    {
        i: 'grid18',
        x: 19,
        y: 7,
        w: 16,
        h: 14,
        c: 'rgba(191, 208, 236, 255)',
        static: true,
        valign: 'middle',
        content: (
            <Localized lang={'pl'}>
                <H2
                    mobileDownscale={false}
                    primary
                    align={TextAlign.Center}
                    noMargin>
                    Dodaj swój cel!
                </H2>
                <div
                    style={{
                        textAlign: 'center',
                    }}>
                    <Link href={'/tutoring-form'}>
                        <Button
                            style={{
                                marginTop: 10,
                                paddingLeft: 70,
                                paddingRight: 70,
                            }}>
                            Dodaj
                        </Button>
                    </Link>
                </div>
            </Localized>
        ),
    },
    {
        i: 'grid19',
        x: 0,
        y: 8,
        w: 11,
        h: 13,
        c: 'rgba(84, 220, 255, 255)',
        static: true,
        valign: 'top',
        content: (
            <Localized lang={'pl'}>
                <H3 mobileDownscale={false} noMargin>
                    Chcę mieć
                    <br />
                    dobrze płatną pracę
                </H3>
            </Localized>
        ),
    },
    {
        i: 'grid20',
        x: 91,
        y: 9,
        w: 9,
        h: 7,
        c: 'rgba(255, 131, 153, 255)',
        static: true,
        content: (
            <Localized lang={'pl'}>
                <P2 mobileDownscale={false} weight={FontWeight.Bold} noMargin>
                    Zdobyć wiedzę i<br />
                    umiejętności przydatne
                    <br />
                    na studiach
                    <br />
                    informatycznych i w pracy
                </P2>
            </Localized>
        ),
    },
    {
        i: 'grid21',
        x: 39,
        y: 10,
        w: 11,
        h: 5,
        c: 'rgba(14, 19, 18, 255)',
        static: true,
        valign: 'middle',
        content: (
            <Localized lang={'pl'}>
                <H3 mobileDownscale={false} color={'white'} noMargin>
                    Zdać dobrze maturę i dostać się na studia z informatyki
                </H3>
            </Localized>
        ),
    },
    {
        i: 'grid22',
        x: 50,
        y: 10,
        w: 7,
        h: 8,
        c: 'rgba(244, 163, 37, 255)',
        static: true,
        content: (
            <Localized lang={'pl'}>
                <H3 mobileDownscale={false} noMargin>
                    Chciałbym się dostać na IOI
                </H3>
            </Localized>
        ),
    },
    {
        i: 'grid23',
        x: 11,
        y: 11,
        w: 8,
        h: 10,
        c: 'rgba(0, 33, 74, 255)',
        static: true,
        valign: 'middle',
        content: (
            <Localized lang={'pl'}>
                <H3 mobileDownscale={false} noMargin color={'white'}>
                    Dostać się
                    <br />
                    na
                </H3>
            </Localized>
        ),
    },
    {
        i: 'grid24',
        x: 70,
        y: 11,
        w: 7,
        h: 5,
        c: 'rgba(85, 62, 114, 255)',
        static: true,
        content: (
            <Localized lang={'pl'}>
                <P2
                    mobileDownscale={false}
                    weight={FontWeight.Bold}
                    color={'white'}
                    noMargin>
                    Potrzebuję motywacju żeby pracować systematycznie
                </P2>
            </Localized>
        ),
    },
    {
        i: 'grid25',
        x: 57,
        y: 12,
        w: 9,
        h: 6,
        c: 'rgba(23, 113, 122, 255)',
        static: true,
        content: (
            <Localized lang={'pl'}>
                <H3 mobileDownscale={false} noMargin color={'white'}>
                    Chcę nauczyć się
                    <br />
                    machine learningu
                </H3>
            </Localized>
        ),
    },
    {
        i: 'grid26',
        x: 35,
        y: 15,
        w: 8,
        h: 12,
        c: 'rgba(26, 126, 182, 255)',
        static: true,
        content: (
            <Localized lang={'pl'}>
                <H3 mobileDownscale={false} noMargin color={'white'}>
                    Chcę nauczyć się pisać strony internetowe i pracować jako
                    programista
                </H3>
            </Localized>
        ),
    },
    {
        i: 'grid27',
        x: 43,
        y: 15,
        w: 4,
        h: 6,
        c: 'rgba(71, 56, 70, 255)',
        static: true,
        content: (
            <Localized lang={'pl'}>
                <P2
                    mobileDownscale={false}
                    weight={FontWeight.Bold}
                    color={'white'}
                    noMargin>
                    Chcę
                    <br />
                    studiować na
                </P2>
            </Localized>
        ),
    },
    {
        i: 'grid28',
        x: 47,
        y: 15,
        w: 3,
        h: 12,
        c: 'rgba(85, 79, 99, 255)',
        static: true,
        content: (
            <Localized lang={'pl'}>
                <P2
                    mobileDownscale={false}
                    weight={FontWeight.Bold}
                    noMargin
                    color={'white'}
                    style={{
                        writingMode: 'vertical-rl',
                        transform: 'rotate(180deg) translate(0, -40px)',
                    }}>
                    Chciałbym założyć
                    <br />
                    swoją własną firmę i<br />
                    być jak Elon Musk
                </P2>
            </Localized>
        ),
    },
    {
        i: 'grid29',
        x: 70,
        y: 16,
        w: 7,
        h: 4,
        c: 'rgba(74, 130, 83, 255)',
        static: true,
        content: (
            <Localized lang={'pl'}>
                <P2 mobileDownscale={false} weight={FontWeight.Bold} noMargin>
                    Chciałbym tworzyć swoją własną technologię
                </P2>
            </Localized>
        ),
    },
    {
        i: 'grid30',
        x: 85,
        y: 16,
        w: 7,
        h: 11,
        c: 'rgba(140, 169, 196, 255)',
        static: true,
        content: (
            <Localized lang={'pl'}>
                <H3 mobileDownscale={false} noMargin>
                    Chciałbym nauczyć się rozwiązywać trudne problemy
                    algorytmiczne i informatyczne
                </H3>
            </Localized>
        ),
    },
    {
        i: 'grid31',
        x: 92,
        y: 16,
        w: 7,
        h: 5,
        c: 'rgba(0, 33, 74, 255)',
        static: true,
        content: (
            <Localized lang={'pl'}>
                <P2
                    mobileDownscale={false}
                    weight={FontWeight.Bold}
                    color={'white'}
                    noMargin>
                    Uczyć się analitycznego myślenia i matematyki
                </P2>
            </Localized>
        ),
    },
    {
        i: 'grid32',
        x: 77,
        y: 17,
        w: 8,
        h: 5,
        c: 'rgba(166, 225, 97, 255)',
        static: true,
        content: (
            <Localized lang={'pl'}>
                <P mobileDownscale={false} weight={FontWeight.Bold} noMargin>
                    Chcę zrobić swój duży projekt w liceum
                </P>
            </Localized>
        ),
    },
    {
        i: 'grid33',
        x: 50,
        y: 18,
        w: 9,
        h: 5,
        c: 'rgba(142, 106, 82, 255)',
        static: true,
        content: (
            <Localized lang={'pl'}>
                <H3 mobileDownscale={false} color={'white'} noMargin>
                    Po studiach
                    <br />
                    zostanę inżyninierem
                </H3>
            </Localized>
        ),
    },
    {
        i: 'grid34',
        x: 59,
        y: 18,
        w: 7,
        h: 9,
        c: 'rgba(218, 217, 197, 255)',
        static: true,
        content: (
            <Localized lang={'pl'}>
                <H3 mobileDownscale={false} color={'white'} noMargin>
                    Muszę być dobra z matematyki żeby dostać się na dobre studia
                </H3>
            </Localized>
        ),
    },
    {
        i: 'grid35',
        x: 66,
        y: 20,
        w: 11,
        h: 7,
        c: 'rgba(102, 122, 134, 255)',
        static: true,
        content: (
            <Localized lang={'pl'}>
                <H3 mobileDownscale={false} noMargin>
                    Chcę miec mentora który pomoże mi zdecydować co robić
                </H3>
            </Localized>
        ),
    },
    {
        i: 'grid36',
        x: 0,
        y: 21,
        w: 6,
        h: 6,
        c: 'rgba(206, 128, 255, 255)',
        static: true,
        content: (
            <Localized lang={'pl'}>
                <P2
                    mobileDownscale={false}
                    weight={FontWeight.Bold}
                    noMargin
                    color={'white'}>
                    Chce przygotować się na interview do stażu
                </P2>
            </Localized>
        ),
    },
    {
        i: 'grid37',
        x: 6,
        y: 21,
        w: 9,
        h: 6,
        c: 'rgba(255, 255, 255, 255)',
        static: true,
        valign: 'top',
        content: (
            <Localized lang={'pl'}>
                <H3 mobileDownscale={false} noMargin>
                    Dostać się na
                </H3>
            </Localized>
        ),
    },
    {
        i: 'grid38',
        x: 15,
        y: 21,
        w: 8,
        h: 6,
        c: 'rgba(170, 229, 100, 255)',
        static: true,
        content: (
            <Localized lang={'pl'}>
                <H3 mobileDownscale={false} noMargin>
                    Chcę zrobić projekt który zrobi coś przydatnego
                </H3>
            </Localized>
        ),
    },
    {
        i: 'grid39',
        x: 23,
        y: 21,
        w: 12,
        h: 6,
        c: 'rgba(246, 222, 106, 255)',
        static: true,
        valign: 'middle',
        content: (
            <Localized lang={'pl'}>
                <H3 mobileDownscale={false} noMargin>
                    Chciałabym
                    <br />
                    pojechać na IMO
                </H3>
            </Localized>
        ),
    },
    {
        i: 'grid40',
        x: 43,
        y: 21,
        w: 4,
        h: 6,
        c: 'rgba(234, 168, 157, 255)',
        static: true,
        content: (
            <Localized lang={'pl'}>
                <P2
                    mobileDownscale={false}
                    color={'white'}
                    weight={FontWeight.Bold}
                    noMargin>
                    Chce studiowac na
                </P2>
            </Localized>
        ),
    },
    {
        i: 'grid41',
        x: 92,
        y: 21,
        w: 7,
        h: 6,
        c: 'rgba(155, 213, 216, 255)',
        static: true,
        valign: 'middle',
        content: (
            <Localized lang={'pl'}>
                <P mobileDownscale={false} weight={FontWeight.Bold} noMargin>
                    Chciałbym
                    <br />
                    przygotować
                    <br />
                    się do 2 i 3<br />
                    etapu OM
                </P>
            </Localized>
        ),
    },
    {
        i: 'grid42',
        x: 77,
        y: 22,
        w: 8,
        h: 5,
        c: 'rgba(156, 147, 255, 255)',
        static: true,
        content: (
            <Localized lang={'pl'}>
                <P2
                    mobileDownscale={false}
                    color={'white'}
                    weight={FontWeight.Bold}
                    noMargin>
                    Chce rozwinąć umiejętność pracy twórczej
                </P2>
            </Localized>
        ),
    },
    {
        i: 'grid43',
        x: 50,
        y: 23,
        w: 9,
        h: 4,
        c: 'rgba(74, 116, 203, 255)',
        static: true,
        content: (
            <Localized lang={'pl'}>
                <H3 mobileDownscale={false} noMargin>
                    Chcę się dostać
                    <br />
                    na{' '}
                    <span style={{color: DefaultTheme.colors.secondary}}>
                        TU
                    </span>
                    Delft
                </H3>
            </Localized>
        ),
    },
];

const StyledGrid = styled(GridLayout)`
    position: relative;
    overflow: hidden;
`;

const GridBox = styled(ElevatedBox)`
    user-select: none;
    background-size: cover;
    background-position: center;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    padding: 10px;
    border-radius: 19px;

    ::before {
        content: '';
        height: 100%;
        width: 1px;
        display: inline-block;
        vertical-align: middle;
    }
`;

const GridHint = styled.div`
    position: absolute;
    top: 0;
    left: 0;
    display: none;
`;

const ThisSection = styled(Section)`
    min-height: 800px;

    ${(p: IStyleArgument) => p.theme.down(p.theme.breakpoint.tablet)} {
        min-height: 900px;
    }
`;

const GridCenter = styled(Center)`
    ${(p: IStyleArgument) => p.theme.down(p.theme.breakpoint.mobile)} {
        transform: scale(0.7);
        margin-left: -27vw;
        margin-right: -23vw;
    }
`;

const GridSection: FunctionComponent = () => {
    return (
        <ThisSection heightMultiplier={0.7} tabletHeightMultiplier={0.6}>
            <Center centerItems>
                <H0>
                    <Localized lang={'pl'}>Jak możemy Ci pomóc?</Localized>
                </H0>
                <H2>
                    <Localized lang={'pl'}>
                        Poznaj cele innych uczniów:
                    </Localized>
                </H2>
            </Center>
            <GridCenter
                className={'no-scrollbar'}
                noRightMargin
                maxWidth={1600}>
                <PerfectScrollbar>
                    <StyledGrid
                        isDraggable={false}
                        isDroppable={false}
                        layout={layout}
                        cols={100}
                        rowHeight={14}
                        width={100 * 25 + 99 * 4}
                        style={{
                            width: 100 * 25 + 99 * 4,
                        }}
                        margin={[4, 4]}
                        maxRows={27}
                        containerPadding={[5, 5]}>
                        {layout.map((l) => (
                            <GridBox
                                key={l.i}
                                style={{
                                    backgroundImage: `url("/images/grid/${l.i}.svg")`,
                                }}>
                                <GridHint>{l.i}</GridHint>
                                <VertCent valign={l.valign}>
                                    {l.content}
                                </VertCent>
                            </GridBox>
                        ))}
                    </StyledGrid>
                </PerfectScrollbar>
            </GridCenter>
        </ThisSection>
    );
};

export default GridSection;