import { useBackend } from '../backend';
import { Button, Box, Icon, LabeledList, Section } from '../components';
import { Window } from '../layouts';
import { FullscreenNotice } from './common/FullscreenNotice';

export const NTNetRelay = (props, context) => {
  const { act, data } = useBackend(context);

  const { dos_crashed, enabled, dos_overload, dos_capacity } = data;

  let body = <NTNetRelayContent />;

  if (dos_crashed) {
    body = <NTNetRelayCrash />;
  }

  return (
    <Window width={dos_crashed ? 700 : 500} height={dos_crashed ? 600 : 300} resizable>
      <Window.Content scrollable>{body}</Window.Content>
    </Window>
  );
};

const NTNetRelayContent = (props, context) => {
  const { act, data } = useBackend(context);

  const { dos_crashed, enabled, dos_overload, dos_capacity } = data;

  return (
    <Section
      title="Status"
      buttons={
        <Button
          icon="power-off"
          selected={enabled}
          content={'Relay ' + (enabled ? 'On' : 'Off')}
          onClick={() => act('toggle')}
        />
      }>
      <LabeledList>
        <LabeledList.Item label="Network Buffer Status">
          {dos_overload} / {dos_capacity} GQ
        </LabeledList.Item>
        <LabeledList.Item label="Options">
          <Button icon="exclamation-triangle" content="Purge network blacklist" onClick={() => act('purge')} />
        </LabeledList.Item>
      </LabeledList>
    </Section>
  );
};

const NTNetRelayCrash = (props, context) => {
  const { act, data } = useBackend(context);

  return (
    <FullscreenNotice title="ERROR">
      <Box fontSize="1.5rem" bold color="bad">
        <Icon name="exclamation-triangle" verticalAlign="middle" size={3} mr="1rem" />
        <h2>NETWORK BUFFERS OVERLOADED</h2>
        <h3>Overload Recovery Mode</h3>
        <i>
          This system is suffering temporary outage due to overflow of traffic buffers. Until buffered traffic is
          processed, all further requests will be dropped. Frequent occurences of this error may indicate insufficient
          hardware capacity of your network. Please contact your network planning department for instructions on how to
          resolve this issue.
        </i>
        <h3>ADMINISTRATIVE OVERRIDE</h3>
        <b> CAUTION - Data loss may occur </b>
      </Box>
      <Box>
        <Button icon="exclamation-triangle" content="Purge buffered traffic" onClick={() => act('restart')} />
      </Box>
    </FullscreenNotice>
  );
};