import { Card, Text, Box, Flex } from "@mantine/core";
import type { LineConfig, TLine, TStation } from "../untils/types";
import classes from "./Component.module.css";
import TerminalCLI from "./TerminalXTerm";
import type { Socket } from "socket.io-client";
import { IconCircleCheckFilled } from "@tabler/icons-react";
import { memo } from "react";

const CardLine = ({
  line,
  selectedLines,
  setSelectedLines,
  socket,
  stationItem,
  updateStatus,
}: {
  line: TLine;
  selectedLines: TLine[];
  setSelectedLines: (lines: React.SetStateAction<TLine[]>) => void;
  socket: Socket | null;
  stationItem: TStation;
  updateStatus: (value: LineConfig) => void;
}) => {
  return (
    <Card
      key={line.id}
      shadow="sm"
      radius="md"
      withBorder
      className={classes.card_line}
      style={
        selectedLines.find((val) => val.id === line.id)
          ? { backgroundColor: "#8bf55940" }
          : {}
      }
      onClick={(e) => {
        e.preventDefault();
        e.stopPropagation();
        if (selectedLines.find((val) => val.id === line.id))
          setSelectedLines(selectedLines.filter((val) => val.id !== line.id));
        else setSelectedLines((pre) => [...pre, line]);
      }}
    >
      <Flex
        justify={"space-between"}
        direction={"column"}
        // gap={"md"}
        align={"center"}
      >
        <div>
          <Text fw={600} style={{ display: "flex", gap: "4px" }}>
            Line: {line.lineNumber || line.line_number} - {line.port}{" "}
            {line.status === "connected" && (
              <IconCircleCheckFilled color="green" />
            )}
          </Text>
        </div>
        {/* <Text className={classes.info_line}>PID: WS-C3560CG-8PC-S</Text>
          <div className={classes.info_line}>SN: FGL2240307M</div>
          <div className={classes.info_line}>VID: V01</div> */}
        <Box
          onClick={(e) => {
            e.preventDefault();
            e.stopPropagation();
          }}
          style={{ height: "175px", width: "300px" }}
        >
          <TerminalCLI
            cliOpened={true}
            socket={socket}
            content={line.netOutput ?? ""}
            line_id={Number(line?.id)}
            station_id={Number(stationItem.id)}
            isDisabled={false}
            line_status={line?.status || ""}
            fontSize={11}
            miniSize={true}
            customStyle={{
              maxHeight: "175px",
              height: "175px",
              fontSize: "7px",
              padding: "0px",
              paddingBottom: "0px",
            }}
            onDoubleClick={() => {}}
            updateStatus={updateStatus}
          />
        </Box>
      </Flex>
      {/* <Flex justify={"flex-end"}>
        <Button variant="filled" style={{ height: "30px", width: "70px" }}>
          Take
        </Button>
      </Flex> */}
    </Card>
  );
};

export default memo(CardLine);