import {
	Box,
	IconButton,
	InputAdornment,
	TextField,
	Typography,
} from "@mui/material";
import React from "react";

import SvgTick from "../../assets/SvgTick";
import BuzzLabel from "../BuzzLabel/BuzzLabel";

import { Search, Verified } from "@mui/icons-material";
import { withStyles } from "@mui/styles";
import { palette } from "../theme/palette";

const CustomTextField = withStyles((theme) => ({
	root: {
		"& .MuiOutlinedInput-root": {
			minHeight: 44,
			maxHeight: 52,
			"& fieldset": {
				borderColor: theme.palette.buzzBorder,
			},
			"&:hover fieldset": {
				borderColor: theme.palette.buzzBreadCrumb,
			},
		},
		"& .MuiOutlinedInput-root.Mui-disabled": {
			"& fieldset": {
				borderColor: theme.palette.buzzBorder,
			},
			"&:hover fieldset": {
				borderColor: theme.palette.buzzBorder,
			},
		},
		"& .MuiInputBase-root.Mui-disabled": {
			background: theme.palette.buzzLiteGray,
		},
		"& .MuiInputBase-input.Mui-disabled": {
			color: theme.palette.buzzDisableInputColor,
		},
	},
}))(TextField);

const BuzzInput = ({
	placeholder = "",
	variant = "outlined",
	onChange,
	fullWidth = true,
	disabled = false,
	// inputProps,
	maxLength,
	classes,
	value = "",
	id = new Date().toString() + Math.random() * 10000,
	required = false,
	label = "",
	flex = 1,
	type = "text",
	autoFocus = false,
	autoComplete = "off",
	name,
	onBlur,
	onFocus,
	error,
	helperText,
	size,
	width,
	select = false,
	mr,
	ml,
	mb,
	mt,
	mx,
	my,
	m,
	p,
	pl,
	pr,
	px,
	py,
	pt,
	pb,
	bgcolor = "white",
	forwardRef,
	search = false,
	validation = false,
	nationalCode = false,
	passwordValidation = false,
	onSubmitEditing = () => {},
	alterLink,
	alterLinkText,
	isVerified = false,
	onVerify = null,
	...props
}) => {
	return (
		<Box
			flex={flex}
			m={m}
			mx={mx}
			my={my}
			mr={mr}
			ml={ml}
			mb={mb}
			mt={mt}
			p={p}
			px={px}
			py={py}
			pt={pt}
			pb={pb}
			pl={pl}
			pr={pr}
			width={width}
			// bgcolor={bgcolor}
		>
			<Box display="flex" justifyContent="space-between">
				<BuzzLabel label={label} required={required} id={id} />
				{isVerified && (
					<Box display="flex" alignItems="center" sx={{ gap: 2 }}>
						<Verified sx={{ color: "green", fontSize: "20px" }} />
						<Typography variant="body2">Verified</Typography>
					</Box>
				)}

				{alterLink && (
					<Typography
						style={{ cursor: "pointer" }}
						color="primary"
						variant="body2"
						onClick={alterLink}
					>
						{alterLinkText}
					</Typography>
				)}
			</Box>
			<Box flex={1} bgcolor={bgcolor} borderRadius={4}>
				<CustomTextField
					ref={forwardRef}
					id={id}
					name={name}
					classes={classes}
					onChange={onChange}
					placeholder={placeholder}
					variant={variant}
					fullWidth={fullWidth}
					disabled={disabled}
					value={value}
					maxLength={maxLength}
					type={type}
					autoFocus={autoFocus}
					autoComplete={autoComplete}
					onBlur={onBlur}
					onFocus={onFocus}
					error={error}
					helperText={helperText}
					size={size}
					select={select}
					onKeyDown={(e) => {
						if (e.key === "Enter") {
							onSubmitEditing();
						}
					}}
					InputProps={
						onVerify !== null
							? {
									endAdornment: (
										<InputAdornment position="start">
											<IconButton
												aria-label="search icon button"
												onClick={onVerify}
												edge="start"
											>
												<Typography color="primary">Verify</Typography>
											</IconButton>
										</InputAdornment>
									),
							  }
							: search
							? {
									startAdornment: (
										<InputAdornment position="start">
											<IconButton
												aria-label="search icon button"
												onClick={onSubmitEditing}
												edge="start"
											>
												<Search />
											</IconButton>
										</InputAdornment>
									),
							  }
							: null | validation
							? {
									endAdornment: (
										<InputAdornment position="end">
											<IconButton
												aria-label="search icon button"
												onClick={onSubmitEditing}
												edge="end"
											>
												<SvgTick width={20} height={20} />
											</IconButton>
										</InputAdornment>
									),
							  }
							: null | nationalCode
							? {
									startAdornment: (
										<InputAdornment position="start">
											<Typography color={palette.palette.buzzGreyColor}>+91 </Typography>
										</InputAdornment>
									),
							  }
							: null | passwordValidation
							? {
									endAdornment: (
										<InputAdornment position="end">
											<Typography color={palette.palette.buzzSuccess} fontSize={"0.8rem"}>
												Excellent
											</Typography>
										</InputAdornment>
									),
							  }
							: null
					}
					{...props}
				/>
			</Box>
		</Box>
	);
};

export default BuzzInput;
