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

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();

    const onSubmit = async (data: any) => {
        setData([]);
        setCounting(true);
        toast.success(`Cycle count started`);
        try {
            const res = await axios.post("/ocme/api/v1/cyclecount", data, {
                headers: { Authorization: `Bearer ${token}` },
            });
            toast.success(res.data.message);
            setData(res.data.data);
            setCounting(false);
            reset();
        } 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"
                                            defaultValue={""}
                                            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 === "Quality Check Required"
                                        ) {
                                            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>
    );
}