// Screen (install mode) — user account and device name for the
// installed system. The engine renames the image's fixed user to this
// identity in the target.

use ltk::
{
	Element,
	column, container, flex, row, scroll, text, text_edit, toggle,
};

use crate::app::Msg;
use crate::flow::Screen;
use crate::i18n::tr;
use crate::state::State;
use crate::ui::chrome;
use crate::ui::theme as t;

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

	let mut content = column::<Msg>()
		.spacing( t::ITEM_SPACING )
		.push( chrome::title_block(
			&tr!( "account.title" ),
			Some( &tr!( "account.subtitle" ) ),
		) )
		.push( field_label( &tr!( "account.username" ), palette.text_primary ) )
		.push(
			text_edit::<Msg>( tr!( "account.username_ph" ).to_string(), &form.username )
				.on_change( Msg::AccountUsername )
				.font_size( t::control_font_size() )
				.height( t::control_height() ),
		);
	if !form.username.is_empty() && !form.username_valid()
	{
		content = content.push(
			text( tr!( "account.username_hint" ).to_string() )
				.size( t::SMALL_SIZE )
				.color( palette.text_secondary ),
		);
	}
	content = content
		.push( field_label( &tr!( "account.hostname" ), palette.text_primary ) )
		.push(
			text_edit::<Msg>( tr!( "account.hostname_ph" ).to_string(), &form.hostname )
				.on_change( Msg::AccountHostname )
				.font_size( t::control_font_size() )
				.height( t::control_height() ),
		)
		.push( field_label( &tr!( "account.password" ), palette.text_primary ) )
		.push(
			text_edit::<Msg>( tr!( "account.password_ph" ).to_string(), &form.password )
				.on_change( Msg::AccountPassword )
				.secure( !form.show_password )
				.font_size( t::control_font_size() )
				.height( t::control_height() ),
		)
		.push( field_label( &tr!( "account.password_confirm" ), palette.text_primary ) )
		.push(
			text_edit::<Msg>( tr!( "account.password_confirm_ph" ).to_string(), &form.password_confirm )
				.on_change( Msg::AccountPasswordConfirm )
				.secure( !form.show_password )
				.font_size( t::control_font_size() )
				.height( t::control_height() ),
		);
	if !form.password_confirm.is_empty() && !form.passwords_match()
	{
		content = content.push(
			text( tr!( "account.password_mismatch" ).to_string() )
				.size( t::SMALL_SIZE )
				.color( palette.text_secondary ),
		);
	}
	content = content
		.push( encrypt_row( form.encrypt, palette.text_primary ) )
		.push(
			text( tr!( "account.encrypt_hint" ).to_string() )
				.size( t::SMALL_SIZE )
				.color( palette.text_secondary )
				.wrap( true ),
		);
	if form.encrypt && !state.has_tpm
	{
		content = content.push(
			text( tr!( "account.encrypt_no_tpm" ).to_string() )
				.size( t::SMALL_SIZE )
				.color( palette.danger )
				.wrap( true ),
		);
	}

	let body = column::<Msg>()
		.padding( t::PAGE_PADDING_H )
		.spacing( t::ITEM_SPACING )
		.push( chrome::top_bar( Screen::Account, true, state.mode ) )
		.push( scroll( content ) )
		.push( chrome::primary_cta(
			&tr!( "common.continue" ),
			if form.valid() { Some( Msg::Next ) } else { None },
		) );

	chrome::page( body )
}

fn field_label( label: &str, color: ltk::Color ) -> Element<Msg>
{
	text( label.to_string() ).size( t::BODY_SIZE ).color( color ).into()
}

fn encrypt_row( value: bool, color: ltk::Color ) -> Element<Msg>
{
	let inner = row::<Msg>()
		.spacing( 12.0 )
		.push( flex( text( tr!( "account.encrypt_title" ).to_string() )
			.size( t::BODY_SIZE )
			.color( color ) ) )
		.push(
			toggle::<Msg>( value )
				.on_toggle( Msg::AccountToggleEncrypt )
				.height( t::control_height() ),
		);
	container::<Msg>( inner )
		.padding_v( 8.0 )
		.into()
}
