import React, { useEffect, useState } from 'react';
import { inject, observer } from 'mobx-react';
import { StepTitle, PackageOptionWrapper, PackageOption, StepButton, Box } from '@nova-hf/ui';
import { useTranslation } from 'utils/i18n';
import { useLazyQuery } from '@apollo/client';
import { PROPERTY_DETAILS } from 'graphql/queries/properties';
interface IPropertiesProps {
  fiber?: any;
  authentication?: any;
  color?: string;
  onNext(): void;
}

const Properties = ({ fiber, authentication: { isStaff }, color, onNext }: IPropertiesProps) => {
  const { t } = useTranslation('flutningur');

  if (!fiber.properties) {
    return <div>{t('properties.notFound')}</div>;
  }

  const {
    properties,
    property,
    confirmedAvailability: { street, houseNumber, zip },
  } = fiber;
  const [needVisitConfirmation, setVisitConfirmation] = useState(false);
  const [message, setMessage] = useState('');

  useEffect(() => {
    if (property?.visit) {
      setMessage(t('properties.visit'));
      setVisitConfirmation(true);
    }
  }, []);

  const [getPropertyDetails, { loading }] = useLazyQuery(PROPERTY_DETAILS, {
    onCompleted: (data) => {
      const { canConnect, visit, result } = data.propertyDetails;

      property.visit = visit;

      if (canConnect) {
        if (visit) {
          setMessage(t('properties.visit'));
          setVisitConfirmation(true);
        } else {
          onNext();
        }
      } else {
        setMessage(isStaff ? t(`properties.result.${result}`) : t('properties.result.common'));
      }
    },
  });

  const onSelect = (selectedProperty: any) => {
    if (fiber?.property?.fnum !== selectedProperty?.fnum) {
      setMessage('');
      setVisitConfirmation(false);
    }

    fiber.property = selectedProperty;
    getPropertyDetails({
      variables: { input: { street, houseNumber, zip, fnum: selectedProperty.fnum } },
    });
  };

  return (
    <div>
      <StepTitle title={t('properties.title')} subtitle={t('properties.subtitle')} color={color} />
      <PackageOptionWrapper>
        {properties?.map((p: any) => {
          const selected = p.fnum === property?.fnum;

          return (
            <PackageOption
              color={color}
              key={p.fnum}
              title={p.title}
              subtitle={`${p.size} Fnr(${p.fnum})`}
              selected={selected}
              onSelect={() => onSelect(p)}
              smallTitle
              loading={loading && selected}
            />
          );
        })}
        {message && <Box marginY={3}>{message}</Box>}
      </PackageOptionWrapper>

      {needVisitConfirmation && (
        <StepButton
          background={color}
          textColor="white"
          text={t('button')}
          onClick={() => onNext()}
        />
      )}
    </div>
  );
};

export default inject('fiber', 'authentication')(observer(Properties));