VandyHacks/vaken

import React, { useState } from 'react';
import styled from 'styled-components';
import * as EmailValidator from 'email-validator';
import { Button } from '../../components/Buttons/Button';
import { SearchBox } from '../../components/Input/SearchBox';
import FloatingPopup from '../../components/Containers/FloatingPopup';
import { SmallCenteredText } from '../../components/Text/SmallCenteredText';
import { FlexRow } from '../../components/Containers/FlexContainers';
import {
    useCreateSponsorMutation,
    useCreateTierMutation,
    useCreateCompanyMutation,
    useCompaniesQuery,
    useTiersQuery,
    CompaniesDocument,
    TiersDocument,
} from '../../generated/graphql';
import { Spinner } from '../../components/Loading/Spinner';
import STRINGS from '../../assets/strings.json';

const StyledSelect = styled.select`
    margin: 0.25rem 1rem 0.25rem 0rem;
    padding: 0.75rem;
    box-shadow: 0rem 0.5rem 4rem rgba(0, 0, 0, 0.07);
    border-radius: 0.375rem;
    font-size: 1rem;
    box-sizing: border-box;
    border: 0.0625rem solid '#ecebed';
    min-width: 10rem;
`;

const StyledOption = styled.option`
    margin: 0.25rem 1rem 0.25rem 0rem;
    padding: 0.75rem;
    box-shadow: 0rem 0.5rem 4rem rgba(0, 0, 0, 0.07);
    border-radius: 0.375rem;
    font-size: 1rem;
    box-sizing: border-box;
    border: 0.0625rem solid '#ecebed';
    min-width: 10rem;
`;

const CreateCompany: React.FunctionComponent = (): JSX.Element => {
    const [companyName, setCompanyName] = useState('');
    const [tierId, setTierId] = useState('');
    const [createCompanyMsg, setCreateCompanyMsg] = useState('');

    const [createCompany] = useCreateCompanyMutation({
        variables: { input: { name: companyName, tierId } },
        refetchQueries: [{ query: CompaniesDocument }],
        awaitRefetchQueries: true,
    });

    const { loading, error, data } = useTiersQuery();
    if (error) console.error(error);

    const onCreateCompany = async (): Promise<void> => {
        try {
            createCompany().catch(res => {
                setCreateCompanyMsg(`Sorry. ${res.graphQLErrors[0].message} Please try again :-)`);
            });
        } catch (err) {
            console.error(err);
            setCreateCompanyMsg(STRINGS.GRAPHQL_ORGANIZER_ERROR_MESSAGE);
        }
    };

    return (
        <>
            <FlexRow justifyContent="flex-start">
                <SearchBox
                    width="100%"
                    value={companyName}
                    placeholder="Company Name"
                    onChange={e => setCompanyName(e.target.value)}
                    minWidth="15em"
                />
                {loading || !data ? (
                    <Spinner />
                ) : (
                    <StyledSelect onChange={e => setTierId(e.target.value)}>
                        <StyledOption value="" disabled selected>
                            Select Tier
                        </StyledOption>
                        {data.tiers.map(t => (
                            <StyledOption key={t.id} value={t.id.toString()}>
                                {t.name}
                            </StyledOption>
                        ))}
                    </StyledSelect>
                )}
                <Button onClick={onCreateCompany}>Create</Button>
            </FlexRow>
            <SmallCenteredText color={STRINGS.DARK_TEXT_COLOR} fontSize="1rem" margin="0.8em">
                <span style={{ fontWeight: 'lighter' }}>{createCompanyMsg}</span>
            </SmallCenteredText>
        </>
    );
};

const CreateTier: React.FC = () => {
    const [tierName, setTierName] = useState('');
    const [permissions, setPermissions] = useState(['']);
    const [createTierMsg, setCreateTierMsg] = useState('');

    const [createTier] = useCreateTierMutation({
        variables: { input: { name: tierName, permissions } },
        refetchQueries: [{ query: TiersDocument }],
        awaitRefetchQueries: true,
    });

    const onCreateTier = async (): Promise<void> => {
        try {
            createTier().catch(res => {
                setCreateTierMsg(`Sorry. ${res.graphQLErrors[0].message} Please try again :-)`);
            });
        } catch (err) {
            console.error(err);
            setCreateTierMsg(STRINGS.GRAPHQL_ORGANIZER_ERROR_MESSAGE);
        }
    };

    return (
        <>
            <FlexRow justifyContent="flex-start">
                <SearchBox
                    width="100%"
                    value={tierName}
                    placeholder="Tier Name"
                    onChange={e => setTierName(e.target.value)}
                    minWidth="15em"
                />
                <SearchBox
                    width="100%"
                    value={permissions}
                    placeholder="Tier Permissions (nfc, hackertable, resume)"
                    onChange={e => setPermissions(e.target.value.split(','))}
                    minWidth="15em"
                />
                <Button onClick={onCreateTier}>Create</Button>
            </FlexRow>
            <SmallCenteredText color="#3F3356" fontSize="1rem" margin="0.8em">
                <span style={{ fontWeight: 'lighter' }}>{createTierMsg}</span>
            </SmallCenteredText>
        </>
    );
};

const CreateSponsor: React.FunctionComponent = (): JSX.Element => {
    const [sponsorEmail, setSponsorEmail] = useState('');
    const [sponsorName, setSponsorName] = useState('');
    const [companyId, setCompanyId] = useState('');
    const [createSponsorMsg, setCreateSponsorMsg] = useState('');
    const { loading, data } = useCompaniesQuery();

    const [createSponsor] = useCreateSponsorMutation({
        variables: { input: { companyId, email: sponsorEmail, name: sponsorName } },
    });

    const onCreateSponsorEmail = async (): Promise<void> => {
        // validate the email entered

        if (EmailValidator.validate(sponsorEmail)) {
            try {
                console.log(sponsorEmail);
                console.log(sponsorName);
                createSponsor().catch(res => {
                    setCreateSponsorMsg(`Sorry. ${res.graphQLErrors[0].message} Please try again :-)`);
                });
                // create sponsor in the database
                // already created or not
            } catch (err) {
                console.error(err);
                setCreateSponsorMsg(STRINGS.GRAPHQL_ORGANIZER_ERROR_MESSAGE);
            }
        } else {
            setCreateSponsorMsg(`Email '${sponsorEmail}' is not valid when creating sponsor`);
        }
    };

    return (
        <>
            <FlexRow justifyContent="flex-start">
                <SearchBox
                    width="100%"
                    value={sponsorEmail}
                    placeholder="Sponsor's Email"
                    onChange={e => setSponsorEmail(e.target.value)}
                    minWidth="15em"
                />
                <SearchBox
                    width="100%"
                    value={sponsorName}
                    placeholder="Sponsor's Name"
                    onChange={e => setSponsorName(e.target.value)}
                    minWidth="15em"
                />
                {loading || !data ? (
                    <Spinner />
                ) : (
                    <StyledSelect onChange={e => setCompanyId(e.target.value)}>
                        <StyledOption value="" disabled selected>
                            Select Company
                        </StyledOption>
                        {data.companies.map(c => (
                            <StyledOption key={c.id} value={c.id.toString()}>
                                {c.name}
                            </StyledOption>
                        ))}
                    </StyledSelect>
                )}
                <Button onClick={onCreateSponsorEmail}>Create</Button>
            </FlexRow>
            <SmallCenteredText color="#3F3356" fontSize="1rem" margin="0.8em">
                <span style={{ fontWeight: 'lighter' }}>{createSponsorMsg}</span>
            </SmallCenteredText>
        </>
    );
};

export const SponsorPage: React.FunctionComponent = (): JSX.Element => {
    return (
        <FloatingPopup
            borderRadius="1rem"
            height="auto"
            width="100%"
            backgroundOpacity="1"
            justifyContent="flex-start"
            alignItems="flex-start"
            padding="1.5rem">
            <CreateTier />
            <CreateCompany />
            <CreateSponsor />
        </FloatingPopup>
    );
};

export default SponsorPage;