import {Component} from "preact"; import {type Value} from "@holllo/webextension-storage"; import { Data, Feature, fromStorage, type ThemeSwitcherData, } from "../../storage/exports.js"; import {Setting, type SettingProps} from "./index.js"; type State = { data: Value | undefined; hasUnsavedChanges: boolean; themesList: Array<[string, string]>; }; export class ThemeSwitcherSetting extends Component { constructor(props: SettingProps) { super(props); this.state = { data: undefined, hasUnsavedChanges: false, themesList: [], }; } async componentDidMount() { const themesList = await fromStorage(Data.ThemesList); this.setState({ data: await fromStorage(Feature.ThemeSwitcher), themesList: themesList.value, }); } onChange = (event: Event, key: keyof ThemeSwitcherData) => { const {data} = this.state; const target = event.target as HTMLInputElement | HTMLSelectElement; if (data === undefined) { return; } data.value[key] = target.value; this.setState({data, hasUnsavedChanges: true}); }; save = async () => { const {data} = this.state; if (data === undefined) { return; } await data.save(); this.setState({hasUnsavedChanges: false}); }; render() { const {data, hasUnsavedChanges, themesList} = this.state; if (data === undefined) { return; } const themeOptions = themesList.map(([value, text]) => ( )); const unsavedChanges = hasUnsavedChanges ? "unsaved-changes" : ""; return (

Automatically switch between two themes at certain times of the day.

Switch to{" "} {" "} at{" "} { this.onChange(event, "hourA"); }} type="text" value={data.value.hourA} />

Switch to{" "} {" "} at{" "} { this.onChange(event, "hourB"); }} type="text" value={data.value.hourB} />

); } }