import React, { useEffect } from 'react';
import { useQuery } from '@apollo/client';
import { Box, Container, IconType, SimpleAccordion } from '@nova-hf/ui';
import { MainColorType } from '@nova-hf/ui/umd/ts/src/styles/vars.css';
import { PROFILE_SETTINGS } from 'graphql/queries/settings';
import { useRouter } from 'next/router';
import Authentication from 'store/authentication';
import { IUserData } from 'typings';
import { scrollToElement } from 'utils/helpers';

import {
  GeneralSettings,
  PayerSettings,
  Thjonustuleid,
  TransfareSettings,
  UserSettings,
} from './containers';

interface IServiceSettingsProps {
  subscriptionId: string;
  authentication: Authentication;
  color: MainColorType;
}

export const ServiceSettings = ({
  color,
  subscriptionId,
  authentication,
  ...rest
}: IServiceSettingsProps) => {
  const { accountInput } = authentication;

  const router = useRouter();

  const { error, data } = useQuery<IUserData>(PROFILE_SETTINGS, {
    variables: { accountInput, subscriptionId },
  });
  if (error) {
    return <Box>Villa</Box>;
  }

  useEffect(() => {
    if (router?.query?.settings) {
      setTimeout(() => {
        scrollToElement(`#${router.query.settings}`, true);
      }, 500);
    }
  }, []);

  const hasGeneralSettings =
    data?.me?.profiles[0].settings?.length && data?.me?.profiles[0].settings?.length > 0;

  const settingsCategories = [
    {
      id: 'general',
      name: 'Almennar stillingar',
      icon: 'settings',
      content: <GeneralSettings color={color} {...rest} />,
      active: hasGeneralSettings,
    },
    {
      id: 'service',
      name: 'Þjónustuleið',
      icon: 'novaLogo',
      content: <Thjonustuleid subscriptionId={subscriptionId} authentication={authentication} />,
      active: true,
    },
    {
      id: 'user',
      name: 'Notandi',
      icon: 'happy',
      content: (
        <UserSettings
          subscriptionId={subscriptionId}
          authentication={authentication}
          color={color}
        />
      ),
      active: true,
    },
    {
      id: 'payer',
      name: 'Greiðandi',
      icon: 'wallet',
      content: (
        <PayerSettings
          subscriptionId={subscriptionId}
          authentication={authentication}
          color={color}
        />
      ),
      active: true,
    },
    {
      id: 'transfare',
      name: 'Flutningur',
      icon: 'arrowsLeftRight',
      content: (
        <TransfareSettings
          subscriptionId={subscriptionId}
          authentication={authentication}
          color={color}
        />
      ),
      active: true,
    },
  ];

  const addUrlQuery = (name: string) => {
    const { asPath } = router;
    router.push(`${asPath.split('?')[0]}?settings=${name}`, undefined, { shallow: true });
  };

  const clearUrlQuery = (name: string) => {
    const { query, asPath } = router;
    if (query.settings === name) {
      router.push(`${asPath.split('?')[0]}`, undefined, { shallow: true });
    }
  };

  return (
    <Container>
      {settingsCategories.map(({ id, name, icon, content, active }) => {
        if (active) {
          return (
            <Box key={id} id={id} paddingY={2}>
              <SimpleAccordion
                onExpand={() => addUrlQuery(id)}
                onCollapse={() => clearUrlQuery(id)}
                hasBoxShadow
                title={name}
                icon={icon as IconType}
                color={color}
                isExpanded={router.query.settings === id}
              >
                {content}
              </SimpleAccordion>
            </Box>
          );
        }
      })}
    </Container>
  );
};