import React from 'react';
import { Box, SingleSelect } from '@nova-hf/ui';
import { inject, observer } from 'mobx-react';
import { useRouter } from 'next/router';
import { useSnackbar } from 'notistack';
import Authentication from 'store/authentication';
import {
  BusinessCategory,
  useCustomerNameByNationalIdQuery,
  useUpdateCustomerMutation,
} from 'typings/graphql';

import { getFeatureFlags } from '../../components/feature-flags/FeatureFlags';

type UpdateBusinessCategoryProps = {
  authentication?: Authentication;
};

const UpdateBusinessCategory = ({ authentication }: UpdateBusinessCategoryProps) => {
  const router = useRouter();
  const { enqueueSnackbar } = useSnackbar();
  const featureFlags = getFeatureFlags();
  const isFlokkarActive = featureFlags['flokkar'];
  const nationalId = router?.query?.ssn?.toString();
  const { data: customerData, refetch: customerRefetch } = useCustomerNameByNationalIdQuery({
    variables: { input: { nationalId: nationalId } },
  });
  const [updateCustomer, { loading: updateCustomerLoading }] = useUpdateCustomerMutation({
    onCompleted(data) {
      if (data) {
        enqueueSnackbar('Tókst að uppfæra viðskiptaflokk', {
          variant: 'success',
        });
        customerRefetch();
      }
    },
    onError(error) {
      if (error) {
        enqueueSnackbar('Ekki tókst að uppfæra viðskiptaflokk', {
          variant: 'error',
        });
      }
    },
  });

  const businessCategories = [
    { value: BusinessCategory.Bronze, text: 'Brons' },
    { value: BusinessCategory.Gold, text: 'Gull' },
    { value: BusinessCategory.Diamond, text: 'Demantur' },
    { value: BusinessCategory.Silver, text: 'Silfur' },
    { value: BusinessCategory.Standard, text: 'Standard' },
  ];

  const currentCategory = customerData?.customerByNationalId?.businessCategory;
  const customerId = customerData?.customerByNationalId?.id;

  const onChange = (category: BusinessCategory) => {
    if (category && customerId) {
      updateCustomer({
        variables: {
          input: {
            customerId: customerId,
            businessCategory: category,
          },
        },
      });
    }
  };

  if (authentication?.isStaff && isFlokkarActive) {
    return (
      <Box display="flex" alignItems="center" flexDirection="row" gap={1}>
        <SingleSelect
          color="ocean"
          defaultMenuIsOpen={false}
          placeholder={
            businessCategories.find((cat) => cat.value === currentCategory)?.text ?? 'Standard'
          }
          id="businessCategory"
          label={'Viðskiptaflokkur'}
          maxMenuHeight={250}
          onChange={(e) => {
            onChange(e?.value as BusinessCategory);
          }}
          isClearable={false}
          options={businessCategories.map((cat) => ({
            label: cat.text,
            value: cat.value,
          }))}
          isDisabled={updateCustomerLoading}
        />
      </Box>
    );
  }
  return null;
};

export default inject('authentication')(observer(UpdateBusinessCategory));