const { React } = require('powercord/webpack');

const ThemeCard = require('./ThemeCard');

module.exports = class Settings extends React.PureComponent {
    constructor(props) {
        super(props);

        const themes = [
            {
                name: "CreArts",
                key: "CreArts-Discord",
                preview: "https://media.discordapp.net/attachments/967811356055203910/967879636711243826/unknown.png?width=952&height=614",
                url: null,
            }
        ]

        this.state = {themes: themes}
    }

    async componentDidMount() {
        let themes = this.state.themes
        await Promise.all([ ...themes.map(async (theme) => {
            const pctheme = powercord.styleManager.themes.get(theme.key);
            const repo = await pctheme.getGitRepo();
            const url = `https://github.com/${repo}`;

            theme.url = url;

            return theme;
        })]);
        this.setState({themes:themes});
        this.forceUpdate();
    }

    render() {
        const { main } = this.props;

        if (this.state.themes.some((theme) => theme.url === null)) {
            return null;
        }

        return (
            <div class="skin-toggler-gallery">
                {this.state.themes.map(async (theme) => {
                    console.log(theme)
                    const pctheme = powercord.styleManager.themes.get(theme.key);

                    return <>
                        <ThemeCard
                            url={theme.url}
                            preview={theme.preview}
                            name={theme.name}
                            main={main}
                            theme={pctheme}
                        />
                    </>
                })}

            </div>
        )
    }
}