use std::time::Duration;

use super::settings::{SettingItem, SettingItemProps};
use crate::{
    TTSConfig, Voices,
    hooks::{DebounceOptions, UseDebounceEffect},
    theme::AppChromeTheme,
};
use crossterm::event::{Event, KeyCode, KeyEventKind};
use ratatui::{
    layout::{Constraint, Direction, Flex},
    style::Stylize,
    text::Line,
};
use ratatui_kit::prelude::*;
use strum::IntoEnumIterator;

#[component]
pub fn VoiceSelect(props: &SettingItemProps, mut hooks: Hooks) -> impl Into<AnyElement<'static>> {
    let tts_config = *hooks.use_context::<State<TTSConfig>>();
    let theme = hooks.use_component_theme::<AppChromeTheme>();
    let mut current_voice = hooks.use_state(|| tts_config.read().voice);

    let is_editing = props.is_editing;

    let (prev, current, next) = hooks.use_memo(
        || {
            let data = Voices::iter().collect::<Vec<_>>();
            let index = Voices::iter()
                .position(|i| i == current_voice.get())
                .unwrap_or(0);
            let prev = if index == 0 {
                data.len() - 1
            } else {
                index - 1
            };
            let next = if index + 1 >= data.len() {
                0
            } else {
                index + 1
            };
            (data[prev], data[index], data[next])
        },
        current_voice,
    );

    hooks.use_event_handler(EventScope::Current, EventPriority::Normal, move |event| {
        let Event::Key(key) = event else {
            return EventResult::Ignored;
        };
        if key.kind != KeyEventKind::Press {
            return EventResult::Ignored;
        }
        if !is_editing {
            return EventResult::Ignored;
        }
        match key.code {
            KeyCode::Left | KeyCode::Char('h') => {
                current_voice.set(prev);
                EventResult::Consumed
            }
            KeyCode::Right | KeyCode::Char('l') => {
                current_voice.set(next);
                EventResult::Consumed
            }
            _ => EventResult::Ignored,
        }
    });

    hooks.use_debounce_effect(
        move || {
            tts_config.write().voice = current_voice.get();
        },
        current_voice.get(),
        DebounceOptions::default().wait(Duration::from_secs(1)),
    );

    element!(SettingItem(
        is_editing: props.is_editing,
    ) {
        View(flex_direction: Direction::Horizontal, gap:1){
            View(width:Constraint::Length(18)) {
                    widget(Line::from("选择声音: ".to_string()).style(theme.text))
            }
            View(flex_direction: Direction::Horizontal, gap:1,justify_content:Flex::Center) {
                View(width:Constraint::Length(8)) {
                    widget(Line::from("<").style(theme.text).dim().centered())
                }
                View(width:Constraint::Length(8)) {
                    widget(Line::from(prev.to_string()).style(theme.text).dim().centered())
                }
                View(width:Constraint::Length(8)) {
                    widget(Line::from(current.to_string()).style(theme.text).bold().centered())
                }
                View(width:Constraint::Length(8)) {
                    widget(Line::from(next.to_string()).style(theme.text).dim().centered())
                }
                View(width:Constraint::Length(8)) {
                    widget(Line::from(">").style(theme.text).dim().centered())
                }
            }
        }
    })
}
