import React from 'react';
import { ServerContext } from '@/state/server';
import TitledGreyBox from '@/components/elements/TitledGreyBox';
import { Form, Formik, FormikHelpers, useFormikContext } from 'formik';
import { Actions, useStoreActions } from 'easy-peasy';
import { renameServer } from '@/api/server';
import Field from '@/components/elements/Field';
import { object, string } from 'yup';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
import { ApplicationStore } from '@/state';
import { httpErrorToHuman } from '@/api/http';
import Button from '@/components/elements/Button';
import tw from 'twin.macro';

interface Values {
    name: string;
}

const RenameServerBox = () => {
    const { isSubmitting } = useFormikContext<Values>();

    return (
        <TitledGreyBox title={'Change Server Name'} css={tw`relative`}>
            <SpinnerOverlay visible={isSubmitting}/>
            <Form css={tw`mb-0`}>
                <Field
                    id={'name'}
                    name={'name'}
                    label={'Server Name'}
                    type={'text'}
                />
                <div css={tw`mt-6 text-right`}>
                    <Button type={'submit'}>
                        Save
                    </Button>
                </div>
            </Form>
        </TitledGreyBox>
    );
};

export default () => {
    const server = ServerContext.useStoreState(state => state.server.data!);
    const setServer = ServerContext.useStoreActions(actions => actions.server.setServer);
    const { addError, clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);

    const submit = ({ name }: Values, { setSubmitting }: FormikHelpers<Values>) => {
        clearFlashes('server:settings');
        renameServer(server.uuid, name)
            .then(() => setServer({ ...server, name }))
            .catch(error => {
                console.error(error);
                addError({ key: 'server:settings', message: httpErrorToHuman(error) });
            })
            .then(() => setSubmitting(false));
    };

    return (
        <Formik
            onSubmit={submit}
            initialValues={{
                name: server.name,
            }}
            validationSchema={object().shape({
                name: string().required().min(1),
            })}
        >
            <RenameServerBox/>
        </Formik>
    );
};