/**
 * Le strade per una ricetta nuova, dietro il «+».
 *
 * Prima il «+» apriva direttamente la schermata vuota. Adesso chiede da dove
 * arriva la ricetta, nell'ordine d'uso (Paolo, 28/09): prima «Scrivi una
 * ricetta», che è il gesto di chi ha il quaderno e non deve allungarsi; poi
 * il ricettario di Quanto Basta, un link a una pagina, e la ricerca sul web.
 *
 * «Da un link» legge la pagina qui, sul telefono (estraiRicetta), e apre la
 * schermata di scrittura già compilata: si controlla e si salva. «Cerca sul
 * web» apre il browser; trovata la ricetta si torna con il link.
 */
import { useNavigation } from '@react-navigation/native';
import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
import { useState } from 'react';
import { Linking } from 'react-native';

import { estraiRicetta, indirizzoValido } from '../../io/pagina.ts';
import { useApp } from '../contesto.ts';
import type { ParametriNav } from '../navigazione.ts';
import { FoglioCampo } from './FoglioCampo.tsx';
import { MenuAzioni } from './MenuAzioni.tsx';

export type PropsSceltaNuovaRicetta = {
  visibile: boolean;
  onChiudi: () => void;
};

export function SceltaNuovaRicetta({ visibile, onChiudi }: PropsSceltaNuovaRicetta) {
  const { testo } = useApp();
  const navigation = useNavigation<NativeStackNavigationProp<ParametriNav>>();
  const [foglio, setFoglio] = useState<'link' | 'web' | null>(null);

  const leggiLink = async (scritto: string): Promise<string | null> => {
    const indirizzo = indirizzoValido(scritto);
    if (indirizzo === null) return testo('link.errore.indirizzo');
    let html: string;
    try {
      const risposta = await fetch(indirizzo, { headers: { Accept: 'text/html' } });
      if (!risposta.ok) return testo('link.errore.rete');
      html = await risposta.text();
    } catch {
      return testo('link.errore.rete');
    }
    const ricetta = estraiRicetta(html);
    if (ricetta === null) return testo('link.errore.niente');
    navigation.navigate('Modifica', { ricettaId: null, importa: ricetta });
    return null;
  };

  const cercaSulWeb = async (cosa: string): Promise<string | null> => {
    const q = encodeURIComponent(`${cosa} ${testo('web.ricetta')}`);
    try {
      await Linking.openURL(`https://www.google.com/search?q=${q}`);
      return null;
    } catch {
      return testo('link.errore.rete');
    }
  };

  return (
    <>
      <MenuAzioni
        visibile={visibile}
        titolo={testo('modifica.intestazione.nuova')}
        voci={[
          {
            etichetta: testo('nuova.scrivi'),
            segno: 'matita',
            azione: () => navigation.navigate('Modifica', { ricettaId: null }),
          },
          { etichetta: testo('nuova.catalogo'), segno: 'libro', azione: () => navigation.navigate('RicetteItaliane') },
          { etichetta: testo('nuova.link'), segno: 'esterno', azione: () => setFoglio('link') },
          { etichetta: testo('nuova.web'), segno: 'cerca', azione: () => setFoglio('web') },
        ]}
        onChiudi={onChiudi}
      />
      <FoglioCampo
        visibile={foglio === 'link'}
        titolo={testo('link.titolo')}
        etichetta={testo('link.etichetta')}
        esempio={testo('link.esempio')}
        spiega={testo('link.spiega')}
        conferma={testo('link.leggi')}
        tastiera="url"
        onConferma={leggiLink}
        onChiudi={() => setFoglio(null)}
      />
      <FoglioCampo
        visibile={foglio === 'web'}
        titolo={testo('web.titolo')}
        etichetta={testo('web.etichetta')}
        esempio={testo('web.esempio')}
        spiega={testo('web.spiega')}
        conferma={testo('web.cerca')}
        tastiera="web-search"
        onConferma={cercaSulWeb}
        onChiudi={() => setFoglio(null)}
      />
    </>
  );
}