import axios from "axios";
import { useState } from "react";
import { Controller, useForm } from "react-hook-form";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { LstCard } from "@/components/ui/lstCard";
//import CycleCountLog from "./CycleCountLog";
import {
	Select,
	SelectContent,
	SelectItem,
	SelectTrigger,
	SelectValue,
} from "@/components/ui/select";
import { Skeleton } from "@/components/ui/skeleton";
import {
	Table,
	TableBody,
	TableCell,
	TableHead,
	TableHeader,
	TableRow,
} from "@/components/ui/table";

export default function OcmeCycleCount() {
	const token = localStorage.getItem("auth_token");
	const [data, setData] = useState([]);
	const [counting, setCounting] = useState(false);
	const {
		register,
		handleSubmit,
		//watch,
		formState: { errors },
		reset,
		control,
	} = useForm({
		defaultValues: {
			lane: "",
			laneType: "name",
		},
	});

	const onSubmit = async (data: any) => {
		setData([]);
		setCounting(true);

		if (data.laneType === "") {
			toast.error("Please select a type");
			setCounting(false);
			return;
		}
		toast.success(`Cycle count started`);
		try {
			const res = await axios.post("/lst/old/ocme/api/v1/cycleCount", data, {
				headers: { Authorization: `Bearer ${token}` },
			});

			if (res.data.success) {
				toast.success(res.data.message);
				setData(res.data.data);
				setCounting(false);
				reset();
			}

			if (!res.data.success) {
				toast.success(res.data.message);

				setCounting(false);
			}
		} catch (error) {
			toast.error("There was an error cycle counting");
			setCounting(false);
			reset();
		}
	};
	return (
		<div className="flex flex-row w-screen">
			<div className="m-2 w-5/6">
				<LstCard>
					<p className="ml-2">
						Please enter the name or laneID you want to cycle count.
					</p>
					<div>
						<form onSubmit={handleSubmit(onSubmit)}>
							<div className="flex justify-between">
								<div className="m-2 flex flex-row">
									<Input
										placeholder="enter lane: L064"
										className={errors.lane ? "border-red-500" : ""}
										aria-invalid={!!errors.lane}
										{...register("lane", {
											required: true,
											minLength: {
												value: 3,
												message: "The lane is too short!",
											},
										})}
									/>
									<div className="ml-2">
										<Controller
											control={control}
											name="laneType"
											render={({
												field: { onChange },
												fieldState: {},
												//formState,
											}) => (
												<Select onValueChange={onChange}>
													<SelectTrigger className="w-[180px]">
														<SelectValue placeholder="Select name or id" />
													</SelectTrigger>
													<SelectContent>
														<SelectItem value="name">Name</SelectItem>
														<SelectItem value="laneID">Lane ID</SelectItem>
													</SelectContent>
												</Select>
											)}
										/>
									</div>
								</div>
								<Button className="m-2" type="submit" disabled={counting}>
									{counting ? (
										<span>Counting...</span>
									) : (
										<span>CycleCount</span>
									)}
								</Button>
							</div>
						</form>
					</div>
					<div>
						<Table>
							<TableHeader>
								<TableRow>
									<TableHead>LaneID</TableHead>
									<TableHead>Lane</TableHead>
									<TableHead>AV</TableHead>
									<TableHead>Description</TableHead>
									<TableHead>Running Number</TableHead>
									<TableHead>In Ocme</TableHead>
									<TableHead>In Stock</TableHead>
									<TableHead>Result</TableHead>
								</TableRow>
							</TableHeader>
							{data?.length === 0 ? (
								<TableBody>
									{Array(10)
										.fill(0)
										.map((_, i) => (
											<TableRow key={i}>
												<TableCell className="font-medium">
													<Skeleton className="h-4" />
												</TableCell>
												<TableCell>
													<Skeleton className="h-4" />
												</TableCell>
												<TableCell>
													<Skeleton className="h-4" />
												</TableCell>
												<TableCell>
													<Skeleton className="h-4" />
												</TableCell>
												<TableCell>
													<Skeleton className="h-4" />
												</TableCell>
												<TableCell>
													<Skeleton className="h-4" />
												</TableCell>
												<TableCell>
													<Skeleton className="h-4" />
												</TableCell>
												<TableCell>
													<Skeleton className="h-4" />
												</TableCell>
											</TableRow>
										))}
								</TableBody>
							) : (
								<>
									{data.map((i: any) => {
										let classname = ``;
										if (i.info === "Validate pallet is ok.") {
											classname = `bg-red-500`;
										}
										if (i.info === "Sent to Inv") {
											classname = `bg-amber-700`;
										}
										return (
											<TableRow key={i.runningNumber}>
												<TableCell className={`font-medium ${classname}`}>
													{i.alpla_laneID}
												</TableCell>
												<TableCell className={`font-medium ${classname}`}>
													{i.alpla_laneDescription}
												</TableCell>
												<TableCell className={`font-medium ${classname}`}>
													{i.Article}
												</TableCell>
												<TableCell className={`font-medium ${classname}`}>
													{i.alpla_laneDescription}
												</TableCell>
												<TableCell className={`font-medium ${classname}`}>
													{i.runningNumber}
												</TableCell>
												<TableCell className={`font-medium ${classname}`}>
													{i.ocme}
												</TableCell>
												<TableCell className={`font-medium ${classname}`}>
													{i.stock}
												</TableCell>
												<TableCell className={`font-medium ${classname}`}>
													{i.info}
												</TableCell>
											</TableRow>
										);
									})}
								</>
							)}
						</Table>
					</div>
				</LstCard>
			</div>
			{/* <div className="m-2">
                <CycleCountLog />
            </div> */}
		</div>
	);
}