import { Box, Button, Card, TextField, Typography } from "@mui/material";
import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import {addPost} from "./posts.store"
import moment from "moment";
import("./index.scss");

export default function General(){

    const posts = useSelector((state) => state.generalposts.posts)

    return <>
        <Box
            width="100%"
            height="100%"
            display="flex"
            flexDirection="column"
            className="layout"
            gap="10px"
        >
            <Box
                display="flex"
                flexDirection="row"
                gap="10px"
                className="header"
            >
                <Box className="maxcontent">
                    <Box>
                        <Typography fontSize="2em">
                            Assemble
                        </Typography>
                    </Box>
                </Box>
            </Box>
            <Box
                width="100%"
                height="100%"
                display="flex"
                flexDirection="row"
                className="master"
                gap="10px"
                flexGrow="1"
                pb={1}
            >
                <Box className="rightpanel">
                    <Card
                        sx={{
                            width: "100%",
                            height: "100%"
                        }}
                    >

                    </Card>
                </Box>
                <Box className="middlepanel">
                    <CreateNewPost />
                    {posts.map(({id,date,context}) => {
                        return <PostTemplete
                            key={id}
                            id={id}
                            date={date}
                            context={context}
                        />
                    })}
                </Box>
                <Box className="leftpanel">
                    <Card
                        sx={{
                            width: "100%",
                            height: "100%"
                        }}
                    >

                    </Card>
                </Box>
            </Box>
        </Box>
    </>
};

function CreateNewPost()
{
    const dispatch = useDispatch()
    const [text, setText] = useState("");

    function clickEvent()
    {
        dispatch(addPost(text));
        setText("");
    }

    return <Card sx={{p:1}}>
        <Box>
            <TextField
                multiline
                fullWidth
                rows={2}
                placeholder="Yeni bir gönderi yayımlayın...."
                value={text}
                onChange={(event) => setText(event.target.value) }
            />
        </Box>
        <Box mt={1}>
            <Button
                color="primary"
                variant="contained"
                onClick={clickEvent}
            >
                Yayınla
            </Button>
        </Box>
    </Card>
}

function PostTemplete({id, date, context})
{
    return <Card sx={{p:1}} title={id}>
        <Box>
            <Typography fontSize="0.7em">
                Abdussamed ULUTAŞ
            </Typography>
        </Box>
        <Box py={1}>
            <Typography component="pre">
                {context}
            </Typography>
        </Box>
        <Box>
            <RevokeTiming date={date} />
        </Box>
    </Card>
}

function RevokeTiming({date})
{
    let [text, setText] = useState([,]);

    function update()
    {
        setText([
            moment(date).format("HH:mm:ss DD/MM/YYYY"),
            moment(date).locale("tr").fromNow(false)
        ])
    }

    useEffect(()=>{
        update();
        let timer = setInterval( update, 30_000)
        return () => clearInterval(timer)
    },[]);

    return <Typography fontSize="0.7em" color="#9b9b9b" title={text[0]}>
        {text[1]} yayımladı
    </Typography>
}