import React, { useEffect, useState } from 'react';
import { Box, ListCard, Text } from '@nova-hf/ui';
import { useMobileServicesQuery } from 'typings/graphql';
import { useRouter } from 'next/router';
import { useTranslation } from 'utils/i18n';
import PaginationContainer from 'beta/components/layouts/Pagination';
import ContractsHeader from 'beta/components/contracts-header/ContractsHeader';

type MobileServicesContainerProps = {
  getChosenService: () => void;
  isShowingAllServices: boolean;
  perPageLimit: number;
};

const COLOR = 'pink';

const MobileServicesContainer = ({
  getChosenService,
  isShowingAllServices,
  perPageLimit,
}: MobileServicesContainerProps) => {
  const { t } = useTranslation('services');
  const router = useRouter();
  const customerId = router.query.customerId;
  const [page, setPage] = useState(1);
  const [perPage, setPerPage] = useState(perPageLimit);
  const { data, loading, error } = useMobileServicesQuery({
    variables: {
      input: {
        nationalId: customerId as string,
        page: page,
        perPage: perPage,
      },
    },
  });

  const mobileServices = data?.mobileServices?.services;
  const total = data?.mobileServices.pageInfo.totalCount ?? 0;

  useEffect(() => {
    setPerPage(perPageLimit);
  }, [perPageLimit]);

  if (error) {
    return <Box padding={30}>Something went wrong!</Box>;
  }

  if (loading) {
    return <Box padding={30}>Loading.....</Box>;
  }
  if (total < 1) {
    return null;
  }

  return (
    <Box marginBottom={5}>
      <ContractsHeader color={COLOR} pillText={String(total) ?? '0'} title="Farsími" />
      {mobileServices?.map((service) => (
        <Box key={service?.id} marginBottom={2}>
          <ListCard
            icon="mobile"
            color={COLOR}
            checkBox={{ isChecked: false, type: 'filled' }}
            button={{
              text: t('services.seeMore'),
              icon: 'longArrowRight',
              onClick: () => router.push(`/beta/${service?.user?.id}/thjonustur/${service?.id}`),
            }}
          >
            <Box>
              <Text variant="pMediumBold">{service?.user?.name}</Text>
              <Text variant="pSmallRegular">Greitt af: {service?.user?.name}</Text>
            </Box>
            <Box>
              <Text variant="pMediumBold">
                {service?.phoneNumber ? service?.phoneNumber : 'Ekkert Símanúmer'}
              </Text>
              <Text variant="pSmallRegular">
                {service?.nickname ? service.nickname : 'Vantar Gælunafn'}
              </Text>
            </Box>
            <Box>
              <Text variant="pMediumBold">Áskrift: Vantar</Text>
              <Text variant="pSmallBold">Vantar</Text>
            </Box>
            <Box>
              <Text variant="pMediumBold">Vantar</Text>
              <Text variant="pSmallRegular">Vantar</Text>
            </Box>
          </ListCard>
        </Box>
      ))}
      <PaginationContainer
        buttonText={t('services.seeAllMobile', { total: total })}
        color={COLOR}
        page={page}
        perPage={perPage}
        onSelectPage={setPage}
        total={total}
        onButtonClick={getChosenService}
        isCondensedView={isShowingAllServices}
      />
    </Box>
  );
};

export default MobileServicesContainer;