import React, { useState } from 'react';
import { Box, IconButton, Input, MainButton, SecondaryButton, Text } from '@nova-hf/ui';
import { IContext } from 'beta/typings/context';
import Wrapper from 'components/app-layout/Wrapper';
import { inject } from 'mobx-react';
import { useRouter } from 'next/router';
import { useSnackbar } from 'notistack';

import Authentication from '../../../store/authentication';
import UI from '../../../store/ui';
import {
  RegardingType,
  useInternalNotesQuery,
  usePostInternalNoteMutation,
  useRemoveInternalNoteMutation,
} from '../../../typings/graphql';
import { useTranslation } from '../../../utils/i18n';
import SEO from '../../../utils/SEO';
import Settings from '../containers/settings/Settings';

interface SkilabodProps {
  ui?: UI;
  authentication?: Authentication;
}

const Skilabod = ({ ui, authentication }: SkilabodProps) => {
  if (!authentication) return null;
  const router = useRouter();
  const { t } = useTranslation('stillingar');
  const { enqueueSnackbar } = useSnackbar();
  const [note, setNote] = useState('');
  const [title, setTitle] = useState('');
  const [isPosting, setIsPosting] = useState(false);
  const {
    data: noteData,
    refetch: noteRefetch,
    loading: noteLoading,
  } = useInternalNotesQuery({
    variables: {
      input: {
        customer_national_id: router?.query.ssn,
      },
    },
    skip: !router?.query.ssn,
  });
  const notes = noteData?.internalNotes;

  const [remove] = useRemoveInternalNoteMutation({
    onCompleted() {
      noteRefetch();
    },
  });

  const [post] = usePostInternalNoteMutation({
    onCompleted() {
      noteRefetch();
    },
  });

  const onPost = async () => {
    try {
      await post({
        variables: {
          input: {
            title: title,
            note: note,
            regardingType: RegardingType.Customer,
            customerNationalId: router?.query?.ssn?.toString(),
          },
        },
      });
      enqueueSnackbar(t('general.message.success'), {
        variant: 'success',
      });
    } catch (e: any) {
      enqueueSnackbar(t('general.message.error', { error: e.message }), {
        variant: 'error',
      });
    }
  };

  const onRemove = async (id: string) => {
    try {
      await remove({
        variables: {
          input: {
            id: id,
          },
        },
      });
      enqueueSnackbar(t('general.message.success'), {
        variant: 'success',
      });
    } catch (e: any) {
      enqueueSnackbar(t('general.message.error', { error: e.message }), {
        variant: 'error',
      });
    }
  };

  return (
    <Wrapper header="dark">
      <SEO title={t('notes.seo')} />
      <Settings link={router.asPath} color={ui?.pageColor}>
        <Box marginTop={5}>
          <Text color="black100">{t('notes.description')}</Text>
          {notes?.map((note) => (
            <Box key={note?.id} display="flex" flexDirection="row" alignItems="center">
              <Text color="black100">{note?.title}</Text>
              <IconButton
                color="warning"
                hiddenButtonText={t('notes.buttonText')}
                icon="trash"
                onClick={() => onRemove(note?.id ?? '')}
              />
            </Box>
          ))}
          <SecondaryButton
            colorScheme={ui?.pageColor}
            icon="add"
            text={t('notes.add')}
            onClick={() => setIsPosting(true)}
          />
          {isPosting && (
            <>
              <Box marginY={2}>
                <Input
                  id="title"
                  name="title"
                  label={t('notes.title')}
                  icon="quotationMark"
                  color="grey900"
                  value={title}
                  isBold={false}
                  onChange={(e) => setTitle(e.target.value)}
                />
              </Box>
              <Box>
                <Input
                  id="message"
                  name="message"
                  label={t('notes.seo')}
                  icon="chat"
                  color="grey900"
                  value={note}
                  isBold={false}
                  onChange={(e) => setNote(e.target.value)}
                />
              </Box>
              <Box marginTop={3} width="4/12">
                <MainButton
                  colorScheme={ui?.pageColor ?? 'pink'}
                  text={t('notes.confirm')}
                  isDisabled={noteLoading || !note}
                  onClick={() => onPost()}
                />
              </Box>
            </>
          )}
        </Box>
      </Settings>
    </Wrapper>
  );
};

Skilabod.getInitialProps = ({ pathname, query }: IContext) => {
  return {
    pathname,
    ssn: query.ssn,
    namespacesRequired: ['stillingar', 'settings'],
  };
};

export default inject('authentication', 'ui')(Skilabod);