import { withPageAuthRequired } from "@auth0/nextjs-auth0/client";
import Grid from '@mui/material/Grid';
import Card from '@mui/material/Card';
import CardActions from '@mui/material/CardActions';
import CardContent from '@mui/material/CardContent';
import CardMedia from '@mui/material/CardMedia';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import { useEffect, useState } from "react";
import { DataGrid, GridColDef, GridValueGetterParams } from '@mui/x-data-grid';
import Rating from '@mui/material/Rating';
import Dialog from '@mui/material/Dialog';
import DialogTitle from '@mui/material/DialogTitle';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogActions from '@mui/material/DialogActions';
import CurrencyTextField from '@lupus-ai/mui-currency-textfield';
import TextField from '@mui/material/TextField';
import ArtistPortfolio from "../../components/Old/artistPortfolio";
import { RouterNetwork } from "mdi-material-ui";
import { useRouter } from "next/router";    
import { profile } from "console";
import FileOpen from "@mui/icons-material/FileOpen";

const Profile = () => {

    const [profileData, setArtistData] = useState(null);
    const [description, setDescription] = useState("");
    const [guidelines, setGuidelines] = useState("");

    const [requestMessage, setRequestMessage] = useState("");
    const [requestPrice, setRequestPrice] = useState(100.00);
    const [file, setFile] = useState(null);

    const handleFileChange = (event) => {
        const files = event.target.files;
        setFile(files); // Set files to state
    }


    const handleRequestMessageChange = (event) => {
        setRequestMessage(event.target.value);
    }

    const handleRequestPriceChange = (event) => {
        setRequestPrice(event.target.value);
    }


    const router = useRouter();
    const [open, setOpen] = useState(false);

    const handleClickOpen = () => {
      setOpen(true);
    };
  
    const handleClose = () => {
      setOpen(false);
    };
  
    const submitRequest = async (payload) => {
        const formData = new FormData();
        formData.append("artistId", payload.artistId);
        formData.append("message", payload.message);
        formData.append("amount", payload.amount);
        formData.append("file", payload.file); // Append the file to FormData
    
        const requestResponse = await fetch('/api/box/newRequest', {
            method: 'POST',
            body: formData // Pass FormData containing the file
        });
    
        if(requestResponse.ok){
            router.push("/dashboard/requests")
        } else {
            alert("Error submitting request")
        }
    }
    
    const getData = async () => {
        if(router.query.artistName!=null){
            const profileResponse = await fetch('/api/discovery/artist/'+router.query.artistName);
            const sellerProfile = await profileResponse.json();
            setArtistData(sellerProfile);
    
            setDescription(sellerProfile["description"]);
            setGuidelines(sellerProfile["requestGuidelines"]);
        }
    }

    useEffect(() => {
        getData()
    }, [router.query.artistName]);
  
    const columns: GridColDef[] = [
        {
          field: 'message',
          headerName: 'Review',
          flex: 0.75
        },
        {
          field: 'rating',
          headerName: 'Rating',
          flex: 0.25,
          renderCell: (params: GridValueGetterParams) => (
            <Rating name="read-only" value={params.value} readOnly />
          ),
        },
      ];
      
      const rows = [
        {   id: 1,  message: 'Great work!', rating: 5 },
        {   id: 2,  message: 'BAD work!', rating: 1 },
        {   id: 3,  message: 'Okay work!', rating: 4 },
        {   id: 4,  message: 'Meh work!', rating: 2 },
        {   id: 5,  message: 'Great work!', rating: 5 },
        {   id: 6,  message: 'Mid work!', rating: 3 },
        {   id: 7,  message: 'HORRIBLE work!', rating: 1 },
      ];

  return (
    <>
<Dialog
    open={open}
    onClose={handleClose}
    PaperProps={{
      component: 'form',
      onSubmit: (event: React.FormEvent<HTMLFormElement>) => {
        event.preventDefault();
        const formData = new FormData(event.currentTarget);
        const email = formData.get("email");
        const file = formData.get("file"); // Get the file object
        const payload = {
          artistId: profileData["id"],
          message: requestMessage,
          amount: requestPrice,
          file: file // Include the file in the payload
        };
        submitRequest(payload);
        handleClose();
      },
    }}
>
    <DialogTitle>New Request</DialogTitle>
    <DialogContent>
        <DialogContentText>
            Please read the guidelines of submitting a request before you proceed. You can do that by closing this popup and looking at the page behind.
        </DialogContentText>
        <TextField
            autoFocus
            required
            margin="dense"
            id="name"
            name="message"
            label="Request Message"
            type="message"
            fullWidth
            variant="outlined"
            multiline
            rows={10}
            onChange={handleRequestMessageChange}
            value={requestMessage}
        />
        <CurrencyTextField  
            label="Price"
            variant="standard"
            currencySymbol="$"
            outputFormat="number"
            decimalCharacter="."
            digitGroupSeparator=","
            fullWidth
            onChange={handleRequestPriceChange}
            value={requestPrice}
        />
        
                    <input
                        id="file"
                        name="file"
                        style={{ display: 'none' }}
                        accept="image/*"
                        type="file"
                        multiple
                        onChange={handleFileChange}
                    />
                    <label htmlFor="file">
                        <Button
                        fullWidth
                        
                        variant='outlined'
                            component="span"
                            size="large"
                            sx={{width:"100%"}}
                            startIcon={<FileOpen />}
                        >
                        Select Your Reference Images
                        </Button>
                    </label>
    </DialogContent>
    <DialogActions>
        <Button onClick={handleClose}>Cancel</Button>
        <Button type="submit">Submit Request</Button>
    </DialogActions>
</Dialog>

    <Grid container spacing={2}>
        <Grid item xs={12} md={12}>
            <Card>
            <CardMedia
                sx={{ height: "250px",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                flexDirection: "column"
            }}
                image="https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg?cs=srgb&dl=pexels-miguel-%C3%A1-padri%C3%B1%C3%A1n-255379.jpg&fm=jpg"
                title="green iguana"
            >
                <Typography variant="h5" align="center"  gutterBottom>STORE HEADER</Typography>
            </CardMedia>
            <CardContent>
                <Grid container spacing={2}>
                    <Grid item xs={12} md={6} >
                        <Grid container spacing={2}>
                            <Grid item xs={12} md={12} >
                                <Card>
                                    <CardContent>
                                        <Typography variant="h5" align="center" gutterBottom>BIOGRAPHY HEADER</Typography>
                                        <Typography variant="body2" align="center">
                                            {description}
                                        </Typography>
                                    </CardContent>
                                </Card>
                            </Grid>
                            <Grid item xs={12} md={12} textAlign={"center"}>
                                <Card>
                                    <CardContent>
                                        <Grid container>
                                            <Grid item xs={12} md={12} >
                                                <Typography variant="h5" align="center" gutterBottom>GUIDELINES HEADER</Typography>
                                                <Typography variant="body2" align="center">
                                                    {guidelines}
                                                </Typography>
                                            </Grid>
                                            <Grid item xs={12} md={12} >
                                                <Typography variant="caption" color={"error"} align="center" sx={{marginTop:"4%"}}>
                                                    By clicking "Start New Request" you are agreeing to the terms above and to the terms of service.
                                                </Typography>
                                                <Typography variant="caption" color={"primary"} align="center" sx={{marginTop:"4%"}}>
                                                    [TERMS OF SERVICE]
                                                </Typography>
                                            </Grid>
                                            <Grid item xs={12} md={12} >
                                                <Button onClick={handleClickOpen} size="large" variant="contained" color="primary" sx={{marginTop:"2%"}}>Start New Request</Button>
                                            </Grid>
                                        </Grid>
                                    </CardContent>
                                </Card>
                            </Grid>
                            <Grid item xs={12} md={12} >
                                <Card>
                                    <CardContent>
                                        <Grid container>
                                            <Grid item xs={12} md={12} >
                                                <Typography variant="h5" align="center" gutterBottom>REVIEWS HEADER</Typography>
                                            </Grid>
                                            <Grid item xs={12} md={12} >
                                                <DataGrid
                                                    rows={rows}
                                                    columns={columns}
                                                    autoHeight={true}
                                                    initialState={{
                                                    pagination: {
                                                        paginationModel: {
                                                        pageSize: 5,
                                                        },
                                                    },
                                                    }}
                                                    pageSizeOptions={[5]}
                                                />
                                            </Grid>
                                        </Grid>
                                    </CardContent>
                                </Card>
                            </Grid>
                        </Grid>
                    </Grid>
                    <Grid item xs={12} md={6} >
                        <Card>
                            <CardContent>
                                <Grid container>
                                    <Grid item xs={12} md={12} >
                                        <Typography variant="h5" align="center" gutterBottom>PORTFOLIO HEADER</Typography>
                                    </Grid>
                                    <Grid item xs={12} md={12} >
                                        <Typography variant="body2" align="center">
                                            {profileData!=null ? (
                                                <ArtistPortfolio masonry={true} columns={3} artistId={profileData["id"]} />
                                            ):null}
                                        </Typography>
                                    </Grid>
                                </Grid>
                            </CardContent>
                        </Card>
                    </Grid>
                </Grid>
            </CardContent>
            </Card>
        </Grid>
    </Grid>
    </>
  );
};

// Protected route, checking user authentication client-side.(CSR)
export default withPageAuthRequired(Profile);