import React from 'react';
import { TextField } from '@preply/ds-web-lib';
import styled, { createGlobalStyle } from 'styled-components';
import { getTokenVar as t } from '@preply/ds-web-core';
import { color, spacing } from '@preply/ds-core';
import { FontsExplorerProvider, useFontsExplorerState } from './FontsExplorerProvider';
import { LanguageCard } from './LanguageCard';
import { languagesData } from './data';
import { Filters } from './Filters';

const Container = styled.div`
    display: flex;
    flex-direction: column;
    gap: ${t(spacing[24])};

    p {
        margin: 0;
    }
`;

const Header = styled.div`
    position: sticky;
    top: 0;
    background-color: ${t(color.background.primary)};
    padding: ${t(spacing[8])} 0;
    display: flex;
    align-items: center;
    gap: ${t(spacing[8])};

    [data-preply-ds-component='TextField'] {
        flex: 1;
    }
`;

const Results = styled.div`
    display: flex;
    flex-direction: column;
    gap: ${t(spacing[8])};
`;

const GlobalStyles = createGlobalStyle`
    .sbdocs.sbdocs-content {
        max-width: 1280px;
    }
`;

const FontsExplorerComponent = () => {
    const [state, dispatch] = useFontsExplorerState();

    return (
        <Container lang="en" data-preply-ds-theme="tokyo-ui">
            <GlobalStyles />
            <Header>
                <TextField
                    label="Display text"
                    hideLabel
                    placeholder="Enter text to display here..."
                    defaultValue={state.text}
                    onChange={e => dispatch({ type: 'set-text', text: e.target.value })}
                />

                <Filters />
            </Header>

            <Results>
                {languagesData.map(lang => (
                    <LanguageCard key={lang.code} data={lang} />
                ))}
            </Results>
        </Container>
    );
};

export const FontsExplorer = () => (
    <FontsExplorerProvider>
        <FontsExplorerComponent />
    </FontsExplorerProvider>
);