import React from "react";
import ProjectList from "./ProjectsList";
import { useGetProjectData } from "../../APIs/getProject";
// import ProjectFilter from "./ProjectFilter";
import { useState } from "react";
import { useEffect } from "react";
import { Box, Card, CardContent, FormControl, Grid, InputLabel, MenuItem, Paper, Select, TextField } from "@mui/material";
import { useMutation } from "@tanstack/react-query";
// import { fetchProjects } from "APIs/ProjectScreenAPIs/getProject";
// import { useGetProjectData } from 'APIs/getProject';


export default function Projects(){
    const { data: getProjectDataList } = useGetProjectData();
    const [selectedContractFilter, setSelectedContractFilter] = useState<any>('All');
    const [searchBy, setSearchBy] = useState('');

    // const { mutate } = useMutation(fetchProjects, {
    //     onSuccess: (data) => {
    //     },
    //     onError: () => {
    //       alert('There was an error');
    //     },
    //     onSettled: () => {},
    //   });

    // useEffect(()=>{

    // })
    // useEffect(() => {
    //   setSelectedContractFilter(props.location.state ? props.location.state.type : 'All');
    //   setSearchBy('');
    //   try {
    //     switch (props.location.state.type) {
    //       case 'linked':
    //         props.fetchLinkedProject(searchBy, props.config);
    //         break;
    //       case 'unlinked':
    //         props.fetchUnLinkedProject(searchBy, props.config);
    //         break;
    //       case 'published':
    //         props.fetchPublishedProject(searchBy, props.config);
    //         break;
    //       case 'autolinked':
    //         props.fetchAutoLinkedProjectAssets(searchBy, props.config);
    //         break;
    //       default:
    //         props.fetchProjects(searchBy, props.config);
    //         break;
    //     }
    //   } catch (e) {
    //     props.fetchProjects(searchBy, props.config);
    //   }
    // }, [props.location.state, searchBy, props.config, props]);
  
    // const handleContractFilterChange = (event) => {
    //   setSelectedContractFilter(event.target.value);
    //   setSearchBy('');
    //   try {
    //     switch (event.target.value) {
    //       case 'linked':
    //         props.fetchLinkedProject(searchBy, props.config);
    //         break;
    //       case 'unlinked':
    //         props.fetchUnLinkedProject(searchBy, props.config);
    //         break;
    //       case 'published':
    //         props.fetchPublishedProject(searchBy, props.config);
    //         break;
    //       case 'autolinked':
    //         props.fetchAutoLinkedProjectAssets(searchBy, props.config);
    //         break;
    //       default:
    //         props.fetchProjects(searchBy, props.config);
    //         break;
    //     }
    //   } catch (e) {
    //     props.fetchProjects(searchBy, props.config);
    //   }
    // };
  
    // const handleSearchByChange = (event) => {
    //   setSearchBy(event.target.value);
    //   try {
    //     switch (selectedContractFilter) {
    //       case 'linked':
    //         props.fetchLinkedProject(searchBy, props.config);
    //         break;
    //       case 'unlinked':
    //         props.fetchUnLinkedProject(searchBy, props.config);
    //         break;
    //       case 'published':
    //         props.fetchPublishedProject(searchBy, props.config);
    //         break;
    //       case 'autolinked':
    //         props.fetchAutoLinkedProjectAssets(searchBy, props.config);
    //         break;
    //       default:
    //         props.fetchProjects(searchBy, props.config);
    //         break;
    //     }
    //   } catch (e) {
    //     props.fetchProjects(searchBy, props.config);
    //   }
    // };
  
    // let projects = [];
    // console.log("Console in Props List :", props);
    // try {
    //   switch (selectedContractFilter) {
    //     case 'linked':
    //       projects = props.linkedProjects ? props.linkedProjects : [];
    //       break;
    //     case 'unlinked':
    //       projects = props.unLinkedProjects ? props.unLinkedProjects : [];
    //       break;
    //     case 'published':
    //       projects = props.publishedProjects ? props.publishedProjects : [];
    //       break;
    //     case 'autolinked':
    //       projects = props.autoLinkedProjects ? props.autoLinkedProjects : [];
    //       break;
    //     default:
    //       projects = props.projects ? props.projects : [];
    //       break;
    //   }
    // } catch (e) {
    //   projects = props.projects ? props.projects : [];
    // }
    
    
    return(
        <>
        <Card style={{margin: '1%', backgroundColor:'rgb(24 24 23)'}}>
            <CardContent>
                <FormControl className="select-field" variant="standard" style={{marginTop: '1%'}}>
                    <InputLabel htmlFor="contract-list" >Select Contract</InputLabel>
                    <Select
                        sx={{input: { color: 'white' }}}
                        value={''}
                        // onChange={props.handleContractFilterChange}
                        inputProps={{
                        name: 'contracts',
                        id: 'contract-type',
                        }}
                    >
                        <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={''}
                    sx={{input: { color: 'white' }}}
                    placeholder="Search By Title, Project Title, Contract No, Asset Title, Track Grid, ISRC"
                    // onChange={props.handleSearchByChange}
                    style={{marginLeft: '10%', width: '45%'}}
                    margin="normal"
                />
            </CardContent>
        </Card>
       
        <ProjectList projectData={getProjectDataList}/>
        </>
    )
}