/**
 * 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.
 *
 * Il menù nasce dal «+» stesso (MenuNativo): `children` è il disegno del
 * comando. I fogli di «Da un link» e «Cerca sul web» stanno qui accanto.
 *
 * «Da un link» legge la pagina qui, sul telefono (leggiLink), e apre la
 * schermata di scrittura già compilata, con la foto che arriva subito dopo:
 * 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 type { ReactElement } from 'react';
import { useState } from 'react';
import { Linking } from 'react-native';

import { leggiLink } from '../../io/link.ts';
import { useApp } from '../contesto.ts';
import type { ParametriNav } from '../navigazione.ts';
import { FoglioCampo } from './FoglioCampo.tsx';
import { MenuNativo } from './MenuNativo.tsx';

export type PropsSceltaNuovaRicetta = {
  /** Il disegno del «+», senza Pressable: il tocco lo prende il menù. */
  children: ReactElement;
};

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

  const daLink = async (scritto: string): Promise<string | null> => {
    const esito = await leggiLink(scritto);
    if (esito.tipo === 'errore') return testo(esito.chiave);
    navigation.navigate('Modifica', { ricettaId: null, importa: esito.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 (
    <>
      <MenuNativo
        etichetta={testo('elenco.nuova')}
        voci={[
          {
            etichetta: testo('nuova.scrivi'),
            segno: 'matita',
            simbolo: 'square.and.pencil',
            azione: () => navigation.navigate('Modifica', { ricettaId: null }),
          },
          {
            etichetta: testo('nuova.catalogo'),
            segno: 'libro',
            simbolo: 'book',
            azione: () => navigation.navigate('RicetteItaliane'),
          },
          { etichetta: testo('nuova.link'), segno: 'esterno', simbolo: 'link', azione: () => setFoglio('link') },
          { etichetta: testo('nuova.web'), segno: 'cerca', simbolo: 'magnifyingglass', azione: () => setFoglio('web') },
        ]}
      >
        {children}
      </MenuNativo>
      <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={daLink}
        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)}
      />
    </>
  );
}