import { Box, Button, FormControl, Grid, InputLabel, MenuItem, Paper, Select, TextField } from "@mui/material";
import React, { useEffect, useState } from "react";
import { postSearchList, } from "../../APIs/SearchAPIs/postSearchList";
import AdvancedFilters from "./AdvancedFilters";

export default function Search() {
  const [searchText, setSearchText] = useState('');
  const [advanceFilterData, setAdvanceFilterData] = useState<any>(
    {
      searchByValue:searchText,
      rights: "0",
      asset_type: "0",
      territory: '',
      genre: 'All',
      language: 'All',
      mood: 'All',
      validity: "0",
      artist: ''
    }
  );
  const [showAdvancedFilters, setShowAdvancedFilters] = useState(false);

  // useEffect(()=>{
  //   postSearchList(advanceFilterData)
  // },[advanceFilterData])

  const handleSearch = () => {
    postSearchList(advanceFilterData)
  };

  const handleClear = () => {
    setSearchText('');
    setShowAdvancedFilters(false);
  };

  const handleAdvancedFilter = () => {
    setShowAdvancedFilters(!showAdvancedFilters);
    if (showAdvancedFilters==false){
        setAdvanceFilterData({
          searchText,
          rights: "0",
          asset_type: "0",
          territory: '',
          genre: 'All',
          language: 'All',
          mood: 'All',
          validity: "0",
          artist: ''
        })
    }
  };

    return (
      <Box sx={{ backgroundColor: "#0d0d0d", minHeight: "100vh" }}>
        <Paper square className='projectScreen-background' sx={{ width: '100%', overflow: 'hidden', backgroundColor: 'rgb(13 13 13)' }}>
            <Paper className='projectScreen-background' sx={{ margin: '1%', width: '100%', overflow: 'hidden', textAlign: 'center' }}>
            <Grid container spacing={2} sx={{ bgcolor: '#181818' }} justifyContent="center">
                <Grid item xs={12}>
                    <TextField
                    placeholder="Search By Project Title, Asset Title, Artist, Track Grid, ISRC"
                    variant="outlined"
                    value={searchText}
                    onChange={(e) => setSearchText(e.target.value)}
                    sx={{
                        width: '50%',
                        '& label.Mui-focused': {
                        color: 'white', 
                        },
                        '& .MuiOutlinedInput-root': {
                        '& fieldset': {
                            borderColor: 'white', 
                        },
                        '&:hover fieldset': {
                            borderColor: 'white', 
                        },
                        '&.Mui-focused fieldset': {
                            borderColor: 'white',
                        },
                        },
                        '& input': {
                        color: 'white', 
                        },
                        marginTop:2,
                    }}
                    />
                </Grid>
                <Grid item xs={12}>
                    <Button variant="contained" onClick={handleSearch} sx={{ marginRight: '1%', bgcolor: 'red' }}>
                    Search
                    </Button>
                    <Button variant="contained" onClick={handleClear} sx={{ marginRight: '1%', bgcolor: 'red' }}>
                    Clear
                    </Button>
                    <Button variant="contained" onClick={handleAdvancedFilter} sx={{ bgcolor: 'red' }}>
                    Advanced Filter
                    </Button>
                </Grid>
                </Grid>
                {showAdvancedFilters && <AdvancedFilters advanceFilterData={advanceFilterData} setAdvanceFilterData={setAdvanceFilterData}/>}
            </Paper>
        </Paper>
      </Box>
    )
}