import React, { FC, useState } from "react";
import classNames from "classnames";
import { Box, Group, Text } from "@mantine/core";
import BoardMenu from "@/app/deals/components/shared/BoardMenu/BoardMenu";
import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
import InPlaceInput from "@/components/ui/InPlaceInput/InPlaceInput";
import useIsMobile from "@/hooks/useIsMobile";
import { BoardSchema } from "@/lib/client";
import styles from "./Board.module.css";

type Props = {
    board: BoardSchema;
};

const Board: FC<Props> = ({ board }) => {
    const { selectedBoard, onUpdateBoard, onDeleteBoard } = useBoardsContext();
    const isMobile = useIsMobile();
    const [isHovered, setIsHovered] = useState(false);

    return (
        <Group
            px={"md"}
            py={"xs"}
            className={classNames(
                styles.board,
                selectedBoard?.id === board.id && styles["board-selected"]
            )}
            justify={"space-between"}
            onMouseEnter={() => setIsHovered(true)}
            onMouseLeave={() => setIsHovered(false)}>
            <InPlaceInput
                defaultValue={board.name}
                onComplete={value => onUpdateBoard(board.id, { name: value })}
                inputStyles={{
                    input: {
                        height: 24,
                        minHeight: 24,
                    },
                }}
                getChildren={startEditing => (
                    <>
                        <Box>
                            <Text style={{ textWrap: "nowrap" }}>
                                {board.name}
                            </Text>
                        </Box>
                        {!isMobile && (
                            <BoardMenu
                                isHovered={
                                    selectedBoard?.id === board.id || isHovered
                                }
                                onDeleteBoard={onDeleteBoard}
                                board={board}
                                startEditing={startEditing}
                            />
                        )}
                    </>
                )}
                modalTitle={"Редактирование доски"}
            />
        </Group>
    );
};

export default Board;