import React from "react";
import ProjectList from "./ProjectsList";
import { getProjectList } from "../../APIs/ProjectScreenAPIs/getProject";
import { useState } from "react";
import { useEffect } from "react";
import { getLinkedProjectList } from "../../APIs/ProjectScreenAPIs/getLinkedProject";
import { Box, Card, CardContent, FormControl, Grid, InputLabel, MenuItem, Paper, Select, TextField } from "@mui/material";
import { getPublishedProjects } from "../../APIs/ProjectScreenAPIs/getPublishedProject";
import { getUnlinkedProjects } from "../../APIs/ProjectScreenAPIs/getUnlinkedProject";
  

export default function Projects(){
    const [selectedContractFilter, setSelectedContractFilter] = useState<any>('All');
    const [ContractFilterResponseData, setContractFilterResponseData] = useState<any>();
    const [searchByFilter, setSearchByFilter] = useState('');

    useEffect(() => {
        const fetchData = async () => {
          try {
            if (selectedContractFilter === 'All') {
              const data = await getProjectList(searchByFilter);
              setContractFilterResponseData(data);
            } else if (selectedContractFilter === 'linked') {
              const data = await getLinkedProjectList(searchByFilter);
              setContractFilterResponseData(data);
            } else if (selectedContractFilter === 'unlinked') {
              const data = await getUnlinkedProjects(searchByFilter);
              setContractFilterResponseData(data);
            } else if (selectedContractFilter === 'published') {
              const data = await getPublishedProjects(searchByFilter);
              setContractFilterResponseData(data);
            }
          } catch (error) {
            console.error('Error fetching data:', error);
          }
        };
        fetchData();
    }, [selectedContractFilter, searchByFilter]);
      

    return(
     
        <Box sx={{ backgroundColor: "#0d0d0d", minHeight: "100vh" }}>
        <Card square style={{ backgroundColor:'rgb(13 13 13)'}}>
            <Card sx={{margin:'1%', backgroundColor:'rgb(23 23 22)'}}>
            <CardContent>
                <FormControl className="select-field" variant="standard" style={{marginTop: '1%'}}>
                    <InputLabel htmlFor="contract-list" sx={{ color: 'white',paddingLeft:1 }}>Select Contract</InputLabel>
                    <Select
                        sx={{color: 'white',
                        '& .MuiSelect-iconOutlined ': {
                          color: '#393939',
                        },
                        }}
                        value={selectedContractFilter}
                        inputProps={{
                        name: 'contracts',
                        id: 'contract-type',
                        }}
                        onChange={(e)=>{
                            setSelectedContractFilter(e.target.value)
                            setSearchByFilter('')
                        }}
                    >
                        <MenuItem value="All">All</MenuItem>
                        <MenuItem value="unlinked">Contract Pending</MenuItem>
                        <MenuItem value="linked">Contract Linked</MenuItem>
                        <MenuItem value="published">Contract Published</MenuItem>
                    </Select>
                </FormControl>
                <TextField
                    id="standard-name"
                    variant="standard"
                    label="Search By"
                    value={searchByFilter}
                    onChange={(e)=>{
                        setSearchByFilter(e.target.value);
                    }}
        
                    sx={{input: { color: 'white' },
                    "& label": {
                        color: "white"
                      },
                      "& label.Mui-focused": {
                        color: "white"
                      },
                      "& .MuiInput-underline:after": {
                        borderBottomColor: "white"
                      },
                      "& .MuiOutlinedInput-root": {
                        "& fieldset": {
                          borderColor: "white"
                        }},
                        "&:hover fieldset": {
                            borderColor: "white",
                            borderWidth: 2
                          },
                          "&.Mui-focused fieldset": {
                            borderColor: "white"
                          }
                    }}
                    placeholder="Search By Title, Project Title, Contract No, Asset Title, Track Grid, ISRC"
                    style={{marginLeft: '10%', width: '45%'}}
                    margin="normal"
                />
            </CardContent>
            </Card>
        </Card>
       
        <ProjectList projectData={ContractFilterResponseData}/>
        </Box>
              
    )
}