import { Box, useMediaQuery, useTheme } from "@mui/material"
import InputTextfield from "@components/InputTextfield"
import PasswordInput from "@components/passwordInput"
import { setSettingsField, useUserStore } from "@root/stores/user"


export default function UserFields () {
	const theme = useTheme()
	const upSm = useMediaQuery(theme.breakpoints.up("sm"))
	const upMd = useMediaQuery(theme.breakpoints.up("md"))

	const fields = useUserStore((state) => state.settingsFields)

	console.log("fields")
    
	const textFieldProps = {
		gap: upMd ? "16px" : "10px",
		color: "#F2F3F7",
		bold: true,
	}

	return(
		<Box
			sx={{
				display: "grid",
				gridAutoFlow: upSm ? "column" : "row",
				gridTemplateRows: "repeat(4, auto)",
				gridAutoColumns: "1fr",
				rowGap: "15px",
				columnGap: "31px",
				flexGrow: 1,
			}}
		>
			<InputTextfield
				TextfieldProps={{
					placeholder: "Имя",
					value: fields.firstname.value || "",
					helperText: fields.firstname.touched && fields.firstname.error,
					error: fields.firstname.touched && Boolean(fields.firstname.error),
				}}
				onChange={(e) => setSettingsField("firstname", e.target.value)}
				id="firstname"
				label="Имя"
				{...textFieldProps}
			/>
			<InputTextfield
				TextfieldProps={{
					placeholder: "Фамилия",
					value: fields.secondname.value || "",
					helperText: fields.secondname.touched && fields.secondname.error,
					error: fields.secondname.touched && Boolean(fields.secondname.error),
				}}
				onChange={(e) => setSettingsField("secondname", e.target.value)}
				id="secondname"
				label="Фамилия"
				{...textFieldProps}
			/>
			<InputTextfield
				TextfieldProps={{
					placeholder: "Отчество",
					value: fields.middlename.value || "",
					helperText: fields.middlename.touched && fields.middlename.error,
					error: fields.middlename.touched && Boolean(fields.middlename.error),
				}}
				onChange={(e) => setSettingsField("middlename", e.target.value)}
				id="middlename"
				label="Отчество"
				{...textFieldProps}
			/>
			<InputTextfield
				TextfieldProps={{
					placeholder: "ООО Фирма",
					value: fields.orgname.value || "",
					helperText: fields.orgname.touched && fields.orgname.error,
					error: fields.orgname.touched && Boolean(fields.orgname.error),
				}}
				onChange={(e) => setSettingsField("orgname", e.target.value)}
				id="orgname"
				label="Название компании"
				{...textFieldProps}
			/>
			<InputTextfield
				TextfieldProps={{
					placeholder: "username@penahaub.com",
					value: fields.email.value || "",
					helperText: fields.email.touched && fields.email.error,
					error: fields.email.touched && Boolean(fields.email.error),
				}}
				onChange={(e) => setSettingsField("email", e.target.value)}
				id="email"
				label="E-mail"
				{...textFieldProps}
			/>
			<InputTextfield
				TextfieldProps={{
					placeholder: "+7 900 000 00 00",
					value: fields.phoneNumber.value || "",
					helperText: fields.phoneNumber.touched && fields.phoneNumber.error,
					error: fields.phoneNumber.touched && Boolean(fields.phoneNumber.error),
				}}
				onChange={(e) => setSettingsField("phoneNumber", e.target.value)}
				id="phoneNumber"
				label="Телефон"
				{...textFieldProps}
			/>
			<PasswordInput
				TextfieldProps={{
					placeholder: "Не менее 8 символов",
					value: fields.password.value || "",
					helperText: fields.password.touched && fields.password.error,
					error: fields.password.touched && Boolean(fields.password.error),
					autoComplete: "new-password",
				}}
				onChange={(e) => setSettingsField("password", e.target.value)}
				id="password"
				label="Пароль"
				{...textFieldProps}
			/>
		</Box>
	)
}