Notes

import PropTypes from "prop-types";
import { Divider, InputAdornment } from "@material-ui/core";
import React from "react";
import { Card, Grid } from "@material-ui/core";
import Typography from "@material-ui/core/Typography";
import { TextField } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";
import MenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";
import { Button } from "@material-ui/core";
import { AiOutlineGlobal } from "react-icons/ai";
import { IoSearch } from "react-icons/io5";
import { useRouter } from "next/router";
import Autocomplete from "@material-ui/lab/Autocomplete";

const useStyles = makeStyles((theme) => ({
root: {
padding: 20,
width: "65%",
textAlign: "left",
borderRadius: 20,
},
formControl: {
margin: theme.spacing(1),
minWidth: "100%",
},

selectEmpty: {
// marginTop: theme.spacing(2),
minWidth: "90%",
padding: '5px',
borderTop: '1px solid',
borderRight: '1px solid',
borderBottom: '1px solid',
borderRadius: '0px 5px 5px 0px'
},

boxSelect: {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
},

gobal: {
width: '35px',
height: '44px',
padding: '5px',
borderLeft: '1px solid',
borderTop: '1px solid',
borderBottom: '1px solid',
borderRadius: '5px 0 0 5px'
},

select: {
"&:before": {
borderColor: "red",
},
},
textField: {
width: "100%",
borderColor: "#DCDCDC",
marginLeft: "5%",
marginBottom: "2%",
},

cssLabel: {
color: "white",
},

cssOutlinedInput: {
"&$cssFocused $notchedOutline": {
borderColor: "#60AF92 !important",
},
color: "black",
// paddingLeft: "5%",
},

cssFocused: {},

notchedOutline: {
borderWidth: "1px",
borderColor: "#DCDCDC !important",
},

bdradios: {
borderRadius: "50px 50px 0 0",
},
}));

const options = ['Option 1', 'Option 2'];

const SearchForm = ({}) => {
const router = useRouter();
const classes = useStyles();
const [state, setState] = React.useState({
age: "",
name: "hai",
});
const [value, setValue] = React.useState(options[0]);

const handleChange = (event) => {
const name = event.target.name;
setState({
...state,
[name]: event.target.value,
});
};
return (
<div className="flex-center white">
<Card className={classes.root} variant="outlined">
{/* <FormControl className={classes.formControl}> */}
<Typography variant="subtitle1" className="MuiTypography-body1">
เลือกประเทศต้นทาง
</Typography>
<div className={classes.boxSelect}>
{/* <Autocomplete
value={value}
options={options}
renderInput={(params) => (
<TextField
{...params}
label="Combo box"
variant="outlined"
InputProps={{
startAdornment: (
<InputAdornment position="start">
<AiOutlineGlobal />
</InputAdornment>
),
}}
/>
)}
/> */}
<AiOutlineGlobal className={classes.gobal} />
<Select
label="Age"
disableUnderline={true}
className={classes.selectEmpty}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</div>
<Typography className="MuiTypography-body1">เลือกสถานที่</Typography>
<div className="row align-items-end w-100 ">
<TextField
id="standard-name"
placeholder="เลือกจุดหมายปลายทางหรือชื่อที่พักสำหรับ ASQ/ALQ"
className={classes.textField}
// value={this.state.name}
// onChange={this.handleChange("name")}
color="secondary"
// margin="normal"
variant="outlined"
InputLabelProps={{
classes: {
root: classes.cssLabel,
focused: classes.cssFocused,
},
}}
InputProps={{
classes: {
root: classes.cssOutlinedInput,
focused: classes.cssFocused,
notchedOutline: classes.notchedOutline,
},
}}
/>
</div>

<Grid container style={{ paddingLeft: "5%", paddingRight: "3%" }}>
<Grid item xs={12} sm={4}>
<div>
<Typography variant="caption">เลือกเวลาเช็คอิน</Typography>
</div>
</Grid>
<Grid item xs={12} sm={4}>
<div>
<Typography variant="caption">
เลือกเวลาเช็คเอาท์ (14 วัน)
</Typography>
</div>
</Grid>
<Grid item xs={12} sm={4}>
<div>
<Typography variant="caption">
จำนวนห้องและผู้เข้าพักทั้งหมด
</Typography>
</div>
</Grid>
</Grid>

<div className="text-center mt-5">
<Button
onClick={() => router.push("/search")}
style={{
backgroundColor: "#60AF92",
width: "80%",
}}
color="primary"
variant="contained"
>
<h5 className="mb-0 p-2 font-light">ค้นหา</h5>
</Button>
</div>
</Card>
</div>
);
};

SearchForm.propTypes = {};

export default SearchForm;