import React, { useState, useEffect } from 'react';
import { useMutation, useQuery } from '@apollo/client';

import { Box, Text, Switch } from '@nova-hf/ui';
import { MainColorType } from '@nova-hf/ui/umd/ts/src/styles/vars.css';
import { inject } from 'mobx-react';
import { ISetting, IUserData } from 'typings';
import { PROFILE_SETTINGS } from 'graphql/queries/settings';
import { TOGGLE_SETTING } from 'graphql/mutations/settings';
import { useTranslation } from 'react-i18next';
import { useSnackbar } from 'notistack';
import { ToggleSettingLoading } from 'pages/thjonusta/stillingar/containers/components/ToggleSettingLoading';

interface IGeneralSettingsProps {
  subscriptionId?: string;
  color: MainColorType;
  authentication?: any;
}

export const GeneralSettings = ({
  color,
  subscriptionId,
  authentication,
}: IGeneralSettingsProps) => {
  const { accountInput } = authentication;
  const { t } = useTranslation('stillingar');
  const { enqueueSnackbar } = useSnackbar();
  const [settings, setSettings] = useState<Array<ISetting>>([]);

  const { loading, error, data, refetch } = useQuery<IUserData>(PROFILE_SETTINGS, {
    variables: { accountInput, subscriptionId },
  });
  const [toggleSetting] = useMutation(TOGGLE_SETTING);

  useEffect(() => {
    if (data?.me?.profiles[0].settings) {
      setSettings(data?.me?.profiles[0].settings);
    }
  }, [data]);

  if (loading) {
    return (
      <Box padding={4} marginX={{ sm: 0, md: 5 }} marginBottom={4}>
        <ToggleSettingLoading />
        <ToggleSettingLoading />
        <ToggleSettingLoading />
      </Box>
    );
  }

  if (error || !data?.me?.profiles[0] || data?.me?.profiles[0].settings?.length === 0) {
    return <Box>error...</Box>;
  }

  const onToggle = async (id: string) => {
    const index = settings.findIndex((s) => s.settingId === id);
    const on = settings[index].on;

    setSettings([
      ...settings.map((s) => {
        if (s.settingId === id) {
          return { ...s, on: !on };
        }
        return s;
      }),
    ]);

    const payload = {
      subscriptionId,
      settingId: id,
      on: !on,
    };

    try {
      const res = await toggleSetting({ variables: { input: payload } });
      setSettings([
        ...settings.map((s) => {
          if (s.settingId === res.data.updateSetting.setting.settingId) {
            return res.data.updateSetting.setting;
          }
          return s;
        }),
      ]);

      enqueueSnackbar(t('general.message.success'), {
        variant: 'success',
      });
    } catch (e) {
      refetch();
      settings[index].on = on;
      enqueueSnackbar(t('general.message.error', { error: e?.message }), {
        variant: 'error',
      });
    }
  };
  return (
    <Box padding={4} marginX={{ sm: 0, md: 5 }} marginBottom={4}>
      {settings?.map(({ title, on, statusText, settingId }, i) => {
        const isLast = i === settings.length - 1;
        return (
          <Box
            key={title}
            paddingY={3}
            borderBottomStyle={isLast ? 'none' : 'solid'}
            borderWidth="1px"
            borderColor="grey200"
            display="flex"
            justifyContent="space-between"
          >
            <Box>
              <Box>
                <Text color="black100" variant="pLargeBold">
                  {title}
                </Text>
              </Box>
              <Box>
                <Text color="black100" variant="pMediumRegular">
                  {statusText}
                </Text>
              </Box>
            </Box>
            <Box>
              <Switch color={color} isOn={on} onToggle={() => onToggle(settingId)} />
            </Box>
          </Box>
        );
      })}
    </Box>
  );
};

GeneralSettings.getInitialProps = ({ query }: any) => {
  const { subscriptionId } = query;

  return {
    subscriptionId,
    namespacesRequired: ['common', 'stillingar'],
  };
};

export default inject('authentication')(GeneralSettings);