import React, { useState } from "react";
import { Page } from "@/pages/base";
import { useTranslation } from "react-i18next";
import { Button, Container, TextField } from "@material-ui/core";

import api from "@/api";

export const RegisterEditionPage = () => {
    const { t } = useTranslation();

    const [key, setKey] = useState<string>("");

    const handleRegister = () => {
        api.edition.join(key);
    }

    return <Page>
        <Page.Header maxWidth="md">
            <Page.Title>{ t("edition.register") }</Page.Title>
        </Page.Header>

        <Container maxWidth="md">
            <TextField label={ t("edition.key") } fullWidth
                       onChange={ (ev: React.ChangeEvent<HTMLInputElement>) => setKey(ev.currentTarget.value) }
                       value={ key } />
            <Button onClick={ handleRegister }>{ t("edition.register") }</Button>
        </Container>
    </Page>
}