import React from 'react';
import AdminBox from '@/components/admin/AdminBox';
import tw from 'twin.macro';
import { Context } from '@/components/admin/servers/ServerRouter';
import Button from '@/components/elements/Button';

const ServerManageContainer = () => {
    const server = Context.useStoreState(state => state.server);

    if (server === undefined) {
        return (
            <></>
        );
    }

    return (
        <div css={tw`grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-x-2 gap-y-2`}>
            <div css={tw`h-auto flex flex-col`}>
                <AdminBox title={'Reinstall Server'} css={tw`relative w-full`}>
                    <div css={tw`flex flex-row text-red-500 justify-start items-center mb-4`}>
                        <div css={tw`w-12 mr-2`}>
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
                            </svg>
                        </div>
                        <p css={tw`text-sm`}>
                            Danger! This could overwrite server data.
                        </p>
                    </div>
                    <Button size={'large'} color={'red'} css={tw`w-full`}>Reinstall Server</Button>
                    <p css={tw`text-xs text-neutral-400 mt-2`}>
                        This will reinstall the server with the assigned service scripts.
                    </p>
                </AdminBox>
            </div>
            <div css={tw`h-auto flex flex-col`}>
                <AdminBox title={'Install Status'} css={tw`relative w-full`}>
                    <Button size={'large'} color={'primary'} css={tw`w-full`}>Set Server as Installing</Button>
                    <p css={tw`text-xs text-neutral-400 mt-2`}>
                        If you need to change the install status from uninstalled to installed, or vice versa, you may do so with the button below.
                    </p>
                </AdminBox>
            </div>
            <div css={tw`h-auto flex flex-col`}>
                <AdminBox title={'Suspend Server '} css={tw`relative w-full`}>
                    <Button size={'large'} color={'primary'} css={tw`w-full`}>Suspend Server</Button>
                    <p css={tw`text-xs text-neutral-400 mt-2`}>
                        This will suspend the server, stop any running processes, and immediately block the user from being able to access their files or otherwise manage the server through the panel or API.
                    </p>
                </AdminBox>
            </div>
        </div>
    );
};

export default () => {
    const server = Context.useStoreState(state => state.server);

    if (server === undefined) {
        return (
            <></>
        );
    }

    return (
        <ServerManageContainer/>
    );
};