import { useMutation, useQueryClient } from '@tanstack/react-query';
import { Icon } from '@barev/ui';
import { errorText, haptic, navigate, useI18n, useToast, useTRPC } from '@barev/web';

/** Первый вход: кто перед нами — переезжает или уже живёт в Армении. Сменить можно в профиле */
export function Segment() {
  const { t } = useI18n();
  const trpc = useTRPC();
  const qc = useQueryClient();
  const toast = useToast();
  const set = useMutation(
    trpc.client.setSegment.mutationOptions({
      onSuccess: () => {
        haptic.ok();
        navigate('/', { replace: true });
        void qc.invalidateQueries();
      },
      onError: (e) => toast(errorText(t, e), 'error'),
    }),
  );
  return (
    <main className="app app--plain seg">
      <div className="seg__word" aria-hidden="true">
        Barev
      </div>
      <h1 className="seg__title">{t('client.segment.title')}</h1>
      <p className="seg__sub">{t('client.segment.sub')}</p>
      <div className="seg__choices">
        <button className="seg__choice" disabled={set.isPending} onClick={() => set.mutate({ segment: 'MOVING' })}>
          <Icon name="globe" size={26} />
          <span>
            <b>{t('client.segment.moving')}</b>
            <span>{t('client.segment.movingText')}</span>
          </span>
        </button>
        <button className="seg__choice" disabled={set.isPending} onClick={() => set.mutate({ segment: 'LIVING' })}>
          <Icon name="home" size={26} />
          <span>
            <b>{t('client.segment.living')}</b>
            <span>{t('client.segment.livingText')}</span>
          </span>
        </button>
      </div>
    </main>
  );
}