import React from "react";
import styles from "./task-list-header.module.css";
import { Text, ActionIcon, Tooltip } from "@mantine/core";
import { useDispatch, useSelector } from "react-redux";
import { toggleGanttListVisibility } from "../../../../Settings/store/taskSlice";
import { IconArrowBarLeft, IconArrowBarRight } from "@tabler/icons-react";

export const TaskListHeader = ({ headerHeight, fontFamily, fontSize, rowWidth }) => {
    const dispatch = useDispatch();
    const { ganttListIsVisible } = useSelector((state) => state.settings.task);

    if (!ganttListIsVisible) {
        return (
            <div
                className={styles.ganttTable}
                style={{
                    fontFamily: fontFamily,
                    fontSize: fontSize,
                    borderBottom: '1px solid #e9ecef',
                    backgroundColor: '#f8f9fa',
                    borderRight: '1px solid #e9ecef',
                    height: headerHeight,
                    width: '40px',
                    display: 'flex',
                    justifyContent: 'center',
                    alignItems: 'center',
                    cursor: 'pointer'
                }}
                onClick={() => dispatch(toggleGanttListVisibility())}
            >
                <Tooltip
                    label="Click to expand"
                    position="right"
                    withArrow
                    transitionProps={{ duration: 200, transition: 'fade' }}
                >
                    <ActionIcon
                        variant="light"
                        radius="xl"
                        size={26}
                        color="#ED7D31"
                        aria-label="Expand List"
                    >
                        <IconArrowBarRight className="hover:scale-110" stroke={1.5} size={16} />
                    </ActionIcon>
                </Tooltip>
            </div>
        );
    }

    return (
        <div
            className={styles.ganttTable}
            style={{
                fontFamily: fontFamily,
                fontSize: fontSize,
                borderBottom: '1px solid #e9ecef',
                backgroundColor: '#EBF1F4',
            }}
        >
            <div
                className={`${styles.ganttTable_Header}`}
                style={{
                    height: headerHeight - 2,
                    display: 'flex',
                    alignItems: 'center',
                    paddingTop: '6px',
                    paddingBottom: '6px'
                }}
            >
                <div
                    className={styles.ganttTable_HeaderItem}
                    style={{
                        minWidth: '250px',
                        maxWidth: '250px',
                        paddingLeft: '5px',
                        display: 'flex',
                        alignItems: 'center'
                    }}
                >
                    <Tooltip
                        label="Click to collapse"
                        position="right"
                        withArrow
                        transitionProps={{ duration: 200, transition: 'fade' }}
                    >
                        <ActionIcon
                            onClick={() => dispatch(toggleGanttListVisibility())}
                            variant="light"
                            radius="xl"
                            size={26}
                            color="#ED7D31"
                            aria-label="Toggle List"
                            style={{ marginRight: '10px' }}
                        >
                            <IconArrowBarLeft className="hover:scale-110" stroke={1.5} size={16} />
                        </ActionIcon>
                    </Tooltip>
                    <Text c="dimmed" size="xs" fw={600} tt="uppercase" ls={0.5}>Task</Text>
                </div>

                <div
                    className={styles.ganttTable_HeaderItem}
                    style={{
                        minWidth: '100px',
                        maxWidth: '100px',
                        textAlign: 'center',
                        borderLeft: '1px solid #e9ecef',
                    }}
                >
                    <Text c="dimmed" size="xs" fw={600} tt="uppercase" ls={0.5}>Assigned</Text>
                </div>

                <div
                    className={styles.ganttTable_HeaderItem}
                    style={{
                        minWidth: '150px',
                        maxWidth: '150px',
                        textAlign: 'center',
                        borderLeft: '1px solid #e9ecef',
                    }}
                >
                    <Text c="dimmed" size="xs" fw={600} tt="uppercase" ls={0.5}>Status</Text>
                </div>

                <div
                    className={styles.ganttTable_HeaderItem}
                    style={{
                        minWidth: '130px',
                        maxWidth: '130px',
                        textAlign: 'center',
                        borderLeft: '1px solid #e9ecef',
                    }}
                >
                    <Text c="dimmed" size="xs" fw={600} tt="uppercase" ls={0.5}>Due Date</Text>
                </div>
            </div>
        </div>
    );
};