// Screen 07-01 — Data storage.

use ltk::
{
	Element,
	column, scroll, text,
};

use crate::app::Msg;
use crate::assets;
use crate::flow::Screen;
use crate::i18n::tr;
use crate::state::{ State, StorageProvider };
use crate::ui::{ chrome, widgets };
use crate::ui::theme as t;

pub fn view( state: &State ) -> Element<Msg>
{
	let palette = ltk::theme_palette();

	let content = column::<Msg>()
		.spacing( t::SECTION_SPACING )
		.push( chrome::title_block( &tr!( "storage.title" ), None ) )
		.push(
			text( tr!( "storage.recommended" ).to_string() )
				.size( t::SMALL_SIZE )
				.color( palette.text_secondary )
				.align_center(),
		)
		.push( widgets::pill_option(
			&tr!( "storage.local" ),
			state.storage == Some( StorageProvider::Local ),
			Msg::SelectStorage( StorageProvider::Local ),
		) )
		.push(
			text( tr!( "storage.external_hint" ).to_string() )
				.size( t::SMALL_SIZE )
				.color( palette.text_secondary )
				.align_center(),
		)
		.push( widgets::pill_option_branded(
			&tr!( "storage.proton" ),
			assets::PROTON_ICON,
			state.storage == Some( StorageProvider::Proton ),
			Msg::SelectStorage( StorageProvider::Proton ),
		) )
		.push( widgets::pill_option_branded(
			&tr!( "storage.dropbox" ),
			assets::DROPBOX_ICON,
			state.storage == Some( StorageProvider::Dropbox ),
			Msg::SelectStorage( StorageProvider::Dropbox ),
		) );

	let body = column::<Msg>()
		.padding( t::PAGE_PADDING_H )
		.spacing( t::SECTION_SPACING )
		.push( chrome::top_bar( Screen::DataStorage, true, state.mode ) )
		.push( scroll( content ) );

	chrome::page( body )
}
