import {Post as PostType, Topic as TopicType} from "../../utils/topics";
import style from "./style.module.scss";
import {Preview} from "../preview";
import {iso8601ToFrench} from "../../utils/dates";
import {FormGroup} from "../form";
import {Slider} from "../slider";
import {Button} from "../button";
import {Settings as SettingsType, Settings} from "../../utils/settings";

export function Topic(props: {
    topic: TopicType,
    settings: Settings,
    setSettings: (settings: SettingsType) => void,
    addPosts: (topicId: string, postsCount: number) => Promise<void>,
    pendingGeneration: boolean,
}) {
    console.log(props.topic)

    return (
        <div>
            {props.topic.posts.map(post => <Post post={post}/>)}
            <div>
                <h2>Ajout de posts</h2>
                <div className={style.generationSettings}>
                    <FormGroup>
                        <label htmlFor="postCount">Nombre de posts</label>
                        <Slider
                            name="postCount"
                            value={props.settings.postCount}
                            // onChange={(v) => props.setSettings({...props.settings, temperature: v as number})}
                            // onChange={setGenerationPostCount}
                            onChange={(v) => props.setSettings({...props.settings, postCount: v})}
                            min={1}
                            max={10}
                            step={1}
                        />
                    </FormGroup>
                </div>
                <Button
                    onClick={() => props.addPosts(props.topic.id, props.settings.postCount)}
                    secondary={true}
                    loading={props.pendingGeneration}
                >
                    Générer
                </Button>
            </div>
            <hr/>
        </div>
    )
}

function Post(props: {
    post: PostType
}) {
    return (
        <div className={style.post}>
            <div className={style.postHeader}>
                <img src="https://image.jeuxvideo.com/avatar-sm/default.jpg" className={style.avatar} alt="ahi"/>
                <div className={style.user}>{props.post.user}</div>
                <div className={style.date}>{iso8601ToFrench(props.post.date)}</div>
            </div>
            <Preview raw={props.post.content}/>
        </div>
    )
}