import React , {useState} from 'react';

import Select from 'react-select';

import {Link} from 'react-router-dom';

var bnr = require('./../../images/banner/cover3.webp');

const JobSearchForm = () => {

// Define state variables for selected options

const [selectedStyles, setSelectedStyles] = useState([]);
const [selectedColors, setSelectedColors] = useState([]);
const [selectedSizes, setSelectedSizes] = useState([]);

// Define options for each filter

const optionsStyles = [
{ label: 'Contemporary', value: 'Contemporary' },
{ label: 'Modern', value: 'Modern' },
{ label: 'Traditional', value: 'Traditional' },
{ label: 'Farmhouse', value: 'Farmhouse' },
{ label: 'Transitional', value: 'Transitional' },
{ label: 'Industrial', value: 'Industrial' },
{ label: 'Scandinavian', value: 'Scandinavian' },
{ label: 'Rustic', value: 'Rustic' },
];

const optionsColors = [
{ label: 'Red', value: 'Red' },
{ label: 'Green', value: 'Green' },
{ label: 'Blue', value: 'Blue' },
{ label: 'Yellow', value: 'Yellow' },
{ label: 'Orange', value: 'Orange' },
{ label: 'Purple', value: 'Purple' },
{ label: 'Black', value: 'Black' },
{ label: 'White', value: 'White' },
];

const optionsSizes = [
{ label: 'Small', value: 'Small' },
{ label: 'Medium', value: 'Medium' },
{ label: 'Large', value: 'Large' },
{ label: 'X-Large', value: 'X-Large' },
];

// Define a function to filter options based on selected values

function getFilteredOptions(id, options) {
switch (id) {
case 'style':
return options.filter((option) => !selectedStyles.includes(option));
case 'color':
return options.filter((option) => !selectedColors.includes(option));
case 'size':
return options.filter((option) => !selectedSizes.includes(option));
default:
return options;
}
}

// Define a function to update state variables based on selected values

function handleChange(id, value) {
switch (id) {
case 'style':
setSelectedStyles(value);
break;
case 'color':
setSelectedColors(value);
break;
case 'size':
setSelectedSizes(value);
break;
default:
break;
}
}

return (
<>
<div className="dez-bnr-inr jobs-category overlay-black-middle"
style={{backgroundImage:"url(" + bnr + ")"}}>
<div className="container">
<div className="dez-bnr-inr-entry">
{/* <Jobsearchform /> */}
<div className="category-jobs-info">
<div className="nav">
<ul>
<li className="active"><Link to={"/category-
all-jobs"}>All Filters</Link></li>
<li>
<Select
isMulti
id="style"
className="basic-multi-select"
classNamePrefix="select"
value={selectedStyles}
onChange={(selected) =>
handleChange('style', selected)}
options={getFilteredOptions("style",
optionsStyles)}
placeholder="Style
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp
;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" />
</li>
<li>
<Select
isMulti
id="color"
className="basic-multi-select"
classNamePrefix="select"
value={selectedColors}
onChange={(selected) =>
handleChange('color', selected)}
options={getFilteredOptions("color",
optionsColors)}
placeholder="Color" />
</li>
<li>
<Select
isMulti
 id="size"
className="basic-multi-select"
classNamePrefix="select"
value={selectedSizes}
onChange={(selected) =>
handleChange('size', selected)}
options={getFilteredOptions("size",
optionsSizes)}
placeholder="Size
&nbsp;&nbsp;&nbsp;&nbsp;" />
</li>

</ul>
</div>
</div>
</div>
</div>
</div>
<div>
{/* Display selected options for each filter */}
<ul>
{selectedStyles.map((style) => (
<li key={style.value}>{style.label}</li>
))}
{selectedColors.map((color) => (
<li key={color.value}>{color.label}</li>
))}
{selectedSizes.map((size) => (
<li key={size.value}>{size.label}</li>
))}
</ul>
</div>
</>
);
};

export default JobSearchForm;