<commit_before>import * as React from "react";
import { ColorResult, SketchPicker } from "react-color";
import { PlayerViewCustomStyles } from "../../../common/PlayerViewSettings";
import { Button } from "../../Components/Button";
import { ColorBlock } from "./ColorBlock";

interface ColorChooserProps {
    currentStyles: PlayerViewCustomStyles;
    updateStyle: (name: keyof PlayerViewCustomStyles, value: string) => void;
}
interface ColorChooserState {
    styles: PlayerViewCustomStyles;
    selectedStyle: keyof PlayerViewCustomStyles | null;
}

export class ColorChooser extends React.Component<ColorChooserProps, ColorChooserState> {
    constructor(props) {
        super(props);
        this.state = {
            styles: this.props.currentStyles,
            selectedStyle: null
        };
    }

    private handleChangeComplete = (color: ColorResult) => {
        const updatedState = {
            styles: { ...this.state.styles, [this.state.selectedStyle]: color.hex }
        };

        this.setState(updatedState);
        this.props.updateStyle(this.state.selectedStyle, color.hex);
    }

    private bindClickToSelectStyle(style: keyof PlayerViewCustomStyles) {
        return () => this.setState({ selectedStyle: style });
    }

    private clearSelectedStyle = () => {
        const updatedState = {
            styles: { ...this.state.styles, [this.state.selectedStyle]: "" }
        };

        this.setState(updatedState);
        this.props.updateStyle(this.state.selectedStyle, "");
    }

    private getLabelAndOption(label: string, style: keyof PlayerViewCustomStyles) {
        return <p>{label}: <ColorBlock color={this.state.styles[style]} click={this.bindClickToSelectStyle(style)} selected={this.state.selectedStyle == style} /></p>;
    }

    public render() {
        return <div className="c-color-chooser">
            <div>
                <h4>Colors</h4>
                {this.getLabelAndOption("Combatant Text", "combatantText")}
                {this.getLabelAndOption("Background", "combatantBackground")}
                {this.getLabelAndOption("Header Text", "headerText")}
                {this.getLabelAndOption("Background", "headerBackground")}
                {this.getLabelAndOption("Main Background", "mainBackground")}
            </div>
            {
                this.state.selectedStyle !== null &&
                <div>
                    <SketchPicker width="210px" color={this.state.styles[this.state.selectedStyle]} onChangeComplete={this.handleChangeComplete} />
                    <Button text="Clear" onClick={this.clearSelectedStyle} />
                </div>
            }
        </div>;
    }
}<commit_msg>Start with combatant text color selected<commit_after>import * as React from "react";
import { ColorResult, SketchPicker } from "react-color";
import { PlayerViewCustomStyles } from "../../../common/PlayerViewSettings";
import { Button } from "../../Components/Button";
import { ColorBlock } from "./ColorBlock";

interface ColorChooserProps {
    currentStyles: PlayerViewCustomStyles;
    updateStyle: (name: keyof PlayerViewCustomStyles, value: string) => void;
}
interface ColorChooserState {
    styles: PlayerViewCustomStyles;
    selectedStyle: keyof PlayerViewCustomStyles;
}

export class ColorChooser extends React.Component<ColorChooserProps, ColorChooserState> {
    constructor(props) {
        super(props);
        this.state = {
            styles: this.props.currentStyles,
            selectedStyle: "combatantText"
        };
    }

    private handleChangeComplete = (color: ColorResult) => {
        const updatedState = {
            styles: { ...this.state.styles, [this.state.selectedStyle]: color.hex }
        };

        this.setState(updatedState);
        this.props.updateStyle(this.state.selectedStyle, color.hex);
    }

    private bindClickToSelectStyle(style: keyof PlayerViewCustomStyles) {
        return () => this.setState({ selectedStyle: style });
    }

    private clearSelectedStyle = () => {
        const updatedState = {
            styles: { ...this.state.styles, [this.state.selectedStyle]: "" }
        };

        this.setState(updatedState);
        this.props.updateStyle(this.state.selectedStyle, "");
    }

    private getLabelAndOption(label: string, style: keyof PlayerViewCustomStyles) {
        return <p>{label}: <ColorBlock color={this.state.styles[style]} click={this.bindClickToSelectStyle(style)} selected={this.state.selectedStyle == style} /></p>;
    }

    public render() {
        return <div className="c-color-chooser">
            <div>
                <h4>Colors</h4>
                {this.getLabelAndOption("Combatant Text", "combatantText")}
                {this.getLabelAndOption("Background", "combatantBackground")}
                {this.getLabelAndOption("Header Text", "headerText")}
                {this.getLabelAndOption("Background", "headerBackground")}
                {this.getLabelAndOption("Main Background", "mainBackground")}
            </div>
            {
                this.state.selectedStyle !== null &&
                <div>
                    <SketchPicker width="210px" color={this.state.styles[this.state.selectedStyle]} onChangeComplete={this.handleChangeComplete} />
                    <Button text="Clear" onClick={this.clearSelectedStyle} />
                </div>
            }
        </div>;
    }
}
{'fraction_non_alphanumeric': 0.12803409301463775, 'fraction_numerical': 0.0018528812303131369, 'mean_word_length': 2.63257065948856, 'pattern_counts': {'":': 0, '<': 31, '<?xml version=': 0, '>': 39, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4321965', 'n_tokens_mistral': 1454, 'n_tokens_neox': 1434, 'n_words': 266}