import React from 'react';
import styled from 'styled-components';
import { Link } from 'react-router-dom';
import classnames from 'classnames';
import { useParams } from 'react-router-dom';

import Container from './Container';
import { screen } from '../styles/screen';
import { useRecoilValue } from 'recoil';
import { categoriesQuery } from '../recoil/categories/categories';
import withSuspense from '../hooks/withSuspense';

const Wrapper = styled(Container)`
    align-items: center;
    display: flex;
    justify-content: space-between;
    overflow: auto;
    padding: 20px 0;

    ${screen.md} {
        padding: 30px 0 20px 0;
    }

    a,
    a:visited {
        color: #3e4457;
        font-size: 0.75rem;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 2px;
        margin-right: 15px;
        white-space: nowrap;

        &:active,
        &.active {
            font-weight: bold;
        }

        ${screen.md} {
            margin: 0;
            font-size: 1rem;
            grid-column: span 1;
        }
    }

    .help {
        font-size: 12px;
    }
`;

function Categories() {
    const { categoryName } = useParams<{ categoryName: string }>();
    const categories = useRecoilValue<Category[]>(categoriesQuery);

    return (
        <Wrapper>
            {categories ? (
                categories.map(({ name, label }) => (
                    <Link
                        className={classnames({
                            active: name === categoryName,
                        })}
                        key={name}
                        to={`/categoria/${name}`}
                    >
                        {label}
                    </Link>
                ))
            ) : (
                <div>Loading</div>
            )}

            <Link className="help" to="/ajuda">
                Preciso de Ajuda
            </Link>
        </Wrapper>
    );
}

export default withSuspense(Categories, <div>Carregando</div>);