import { color, spacing } from '@preply/ds-core';
import { getTokenVar as t } from '@preply/ds-web-core';
import { LayoutGrid } from '@preply/ds-web-lib';
import React, { FC } from 'react';
import styled from 'styled-components';

const svgUrls = [
    // They are sorted by name
    'https://static.preply.com/ds/illustrations/tokyo-ui/airplain.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/arrow.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/arrows-multiple.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/arrows-upwards.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/artist.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/awesome.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/back-to-school.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/bar-graph.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/bell.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/booking-a-lesson.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/books.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/books-2.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/books-3.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/brain.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/browser-permissions-chromium.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/browser-permissions-safari.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/bubbles.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/calendar.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/calendar-2.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/checkmark.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/clock.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/clock-yellow.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/clocks.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/coins.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/committed.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/confetti.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/cosmopolite.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/desk.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/desk-supplies.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/discount-badge.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/disco-ball.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/dog.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/first-steps.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/game-on.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/getting-started-down.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/getting-started.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/globe-spot.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/great-homework.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/growth.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/guitar.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/hard-work-1.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/hard-work-2.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/heart.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/it-guru.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/lamp-and-books.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/language-flash-cards.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/laptop.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/laptop-2.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/magnifying-glass.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/making-progress.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/map.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/meeting-with-tutor-2.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/meeting-with-tutor.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/messages.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/messaging.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/mobile-app.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/notes.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/open-book.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/pause-button.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/pencil-and-pen-2.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/pencil-and-pen.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/pig.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/play-button.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/polyglot-2.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/polyglot-pink.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/polyglot.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/present.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/professional.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/progress-steps.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/quote.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/rising-arrows.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/rock-on.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/routine-master.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/serious-learner.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/sheet.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/smiley.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/speech-bubble.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/star_coin.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/stop-button.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/stopwatch.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/system-permissions.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/testing-the-water.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/three-arrows.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/thumbs-up.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/trial-protections-checkmark.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/you-did-great-today.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/warning.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/flashcards.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/abc-dice.svg',
    'https://static.preply.com/ds/illustrations/tokyo-ui/rocket.svg',
];

const HighlightTransparency = styled.div`
    padding: ${t(spacing[12])};
    -webkit-background-size: 50px 50px;
    -moz-background-size: 50px 50px;
    background-size: 50px 50px;
    background-color: ${t(color.background.tertiary)};
    background-image: linear-gradient(
        45deg,
        ${t(color.background.secondary)} 25%,
        transparent 25%,
        transparent 50%,
        ${t(color.background.secondary)} 50%,
        ${t(color.background.secondary)} 75%,
        transparent 75%,
        transparent
    );
`;

export const IllustrationDetail: FC<{ svgUrl: string }> = ({ svgUrl }) => {
    return (
        <div style={{ width: '80%' }}>
            <a href={svgUrl} target="_blank" rel="noreferrer">
                {svgUrl.replace('https://static.preply.com/ds/illustrations/tokyo-ui/', '')}
                <img src={svgUrl} alt="TODO:" />
            </a>
        </div>
    );
};

export const IllustrationsList: FC = () => {
    return (
        <HighlightTransparency>
            <LayoutGrid columns={['25% 25% 25% 25%']} gap="16">
                {svgUrls.map(svgUrl => (
                    <IllustrationDetail key={svgUrl} svgUrl={svgUrl} />
                ))}
            </LayoutGrid>
        </HighlightTransparency>
    );
};