import * as React from "react";
import Config from "../../config";
import UnsubmittedVideoListComponent from "./UnsubmittedVideoListComponent";

export interface UnsubmittedVideosProps {

}

export interface UnsubmittedVideosState {
    tableVisible: boolean;
}

class UnsubmittedVideosComponent extends React.Component<UnsubmittedVideosProps, UnsubmittedVideosState> {

    constructor(props: UnsubmittedVideosProps) {
        super(props);

        this.state = {
            tableVisible: false,
        };
    }

    render(): React.ReactElement {
        const videoCount = Object.keys(Config.local.unsubmittedSegments).length;
        const segmentCount = Object.values(Config.local.unsubmittedSegments).reduce((acc: number, vid: Array<unknown>) => acc + vid.length, 0);

        return <>
            <div style={{marginBottom: "10px"}}>
                {segmentCount == 0 ?
                    chrome.i18n.getMessage("unsubmittedSegmentCountsZero") :
                    chrome.i18n.getMessage("unsubmittedSegmentCounts")
                        .replace("{0}", `${segmentCount} ${chrome.i18n.getMessage("unsubmittedSegments" + (segmentCount == 1 ? "Singular" : "Plural"))}`)
                        .replace("{1}", `${videoCount} ${chrome.i18n.getMessage("videos" + (videoCount == 1 ? "Singular" : "Plural"))}`)
                }
            </div>

            {videoCount > 0 && <div className="option-button inline" onClick={() => this.setState({tableVisible: !this.state.tableVisible})}>
                {chrome.i18n.getMessage(this.state.tableVisible ? "hideUnsubmittedSegments" : "showUnsubmittedSegments")}
            </div>}
            {" "}
            <div className="option-button inline" onClick={this.clearAllSegments}>
                {chrome.i18n.getMessage("clearUnsubmittedSegments")}
            </div>

            {this.state.tableVisible && <UnsubmittedVideoListComponent/>}
        </>;
    }

    clearAllSegments(): void {
        if (confirm(chrome.i18n.getMessage("clearUnsubmittedSegmentsConfirm")))
            Config.local.unsubmittedSegments = {};
    }
}

export default UnsubmittedVideosComponent;