import { useState, useEffect } from "react";
import { useRouter } from "next/router";
import { getUser, findUser } from "../../../lib/requests";
import { Container, Card, Row, Col, Form, FormGroup, Label, Input, CardGroup } from "reactstrap";
import styles from "./[id].module.scss";
import { logout } from "../../../lib/requests";
import { getTopicStyleFromTopic } from "../../lib/getTopicStyle";

function Profile({ user }) {
    const router = useRouter()
    const [loggedInUser, setLoggedInUser] = useState(null)
    const [isLoggedInUser, setIsLoggedInUser] = useState(false)
    const [activeOption, setActiveOption] = useState("Profile")

    useEffect(async () => {
        setLoggedInUser(await getUser())
    }, [])

    useEffect(async () => {
        setIsLoggedInUser(loggedInUser && loggedInUser.id == user.id)
    }, [loggedInUser])

    async function logOut() {
        await logout()
        router.push("/")
    }

    const profileCard = (
        <>
            <Card className={styles.card}>
                <div className={styles.cardTitle}>Profile</div>
                <Form className="mt-3">
                    <Row>
                        <Col md={6}>
                            <FormGroup>
                                <Label for="first_name">
                                    First Name
                                </Label>
                                <Input
                                    id="first_name"
                                    name="first_name"
                                    value={user.first_name}
                                    readOnly
                                />
                            </FormGroup>
                        </Col>
                        <Col md={6}>
                            <FormGroup>
                                <Label for="last_name">
                                    Last Name
                                </Label>
                                <Input
                                    id="last_name"
                                    name="last_name"
                                    value={user.last_name}
                                    readOnly
                                />
                            </FormGroup>
                        </Col>
                    </Row>
                    <Row>
                        <Col md={6}>
                            <FormGroup>
                                <Label for="username">
                                    Username
                                </Label>
                                <Input
                                    id="username"
                                    name="username"
                                    value={user.username}
                                    readOnly
                                />
                            </FormGroup>
                        </Col>
                        <Col md={6}>
                            <FormGroup>
                                <Label for="email">
                                    Email
                                </Label>
                                <Input
                                    id="email"
                                    name="email"
                                    value={user.email}
                                    readOnly
                                />
                            </FormGroup>
                        </Col>
                    </Row>
                </Form>
            </Card>
        </>
    )

    const createPostsDisplay = (postArray) => {

        return (
            <CardGroup className={styles.underline} key={postArray.id}>
                <Label className="d-flex">
                    <input
                        className={styles.radio}
                        type="checkbox"
                        name="radio"
                        disabled
                        checked={postArray.selected}
                    />


                    <div key={postArray.id} className={styles.postDisplay}>
                        <a href={`/discuss/${postArray.id}`}>
                            <Label className={styles.threadHeader}>{postArray.title}</Label>
                            <br />
                            <Label className={`${styles.tag} ${getTopicStyleFromTopic(postArray.topics[0])}`}>
                                {postArray.topics[0]}
                            </Label>
                            <br />
                            <Label className={styles.threadDate}>
                                Posted {new Date(postArray.created_at).toDateString()} by <span className={styles.postAs}>{postArray.post_as}</span>
                            </Label>
                        </a>
                    </div>
                </Label>
            </CardGroup>
        );
    };

    const postsCard = (
        <>
            <Card className={styles.card}>
                <div className={styles.cardTitle}>Posts</div>
                <div className={styles.listOfPosts}>
                    {user.posts.map((post, index) => {
                        return createPostsDisplay(post)
                    })}
                </div>
            </Card>
        </>
    )

    function dispatchCard() {
        switch (activeOption) {
            case "Profile":
                return profileCard
            case "Posts":
                return postsCard
        }
    }


    return (
        <>
            <Container fluid className={styles.container}>
                <Row>
                    <Col xs={3}>
                        <Card className={styles.card}>
                            <div className={styles.cardTitle}>Options</div>
                            <div className={styles.optionsWrapper}>
                                <p className={`${styles.option} ${activeOption == "Profile" ? styles.activeOption : ""}`} onClick={() => { setActiveOption("Profile") }}>Profile</p>
                                <p className={`${styles.option} ${activeOption == "Posts" ? styles.activeOption : ""}`} onClick={() => { setActiveOption("Posts") }}>Posts</p>
                                {isLoggedInUser ? (<p className={`${styles.option} ${styles.logoutOption}`} onClick={logOut}>Logout</p>) : (null)}
                            </div>
                        </Card>
                    </Col>
                    <Col xs={9}>
                        {dispatchCard()}
                    </Col>
                </Row>
            </Container>
        </>
    )
}

export async function getServerSideProps(context) {
    let user = await findUser(context.query.id)
    return {
        props: { user: user },
    }
}

export default Profile
