import React from 'react';
import {
    Button,
    Divider,
    ListItemIcon,
    Menu,
    MenuItem,
    SvgIcon,
} from '@mui/material';
import {
    DataColumn as TableDataColumn,
    DataColumnFix,
    DataSortType
} from '../types/column.type';
import { HeadersMessages } from '../types/head.type';
import { ArrowTooltip } from '../../tooltip/arrow';
import {
    TableHeadCellContent,
    TableHeaderCell,
    TableHeaderResizer,
    TableHeaderSorter,
    TableHeaderSorterHover
} from './style';

interface DataColumn extends TableDataColumn {
    sticky?: number,
}

export interface DataTableHeadCellProps {
    column: DataColumn,
    messages: HeadersMessages,
    hideSort: boolean,
    onFixChange: (fix: DataColumnFix) => void,
    onSortChange: (sort: DataSortType) => void,
    onHiddenChange: (hidden: boolean) => void,
    children?: React.ReactNode | React.ReactNode[] | any
}

export const DataTableHeadCell: React.FC<DataTableHeadCellProps> = ({ column, messages, hideSort, onFixChange, onHiddenChange, onSortChange }) => {
    const [menuAnchor, setMenuAnchor] = React.useState<null | HTMLElement>(null);

    const handleSortChange = () => {
        const value = column.sort === 'asc'
            ? 'desc'
            : 'asc';

        if (onSortChange) {
            onSortChange(value)
        }
    }
    const handleOpenMenu = (event: React.MouseEvent<HTMLButtonElement>) => {
        setMenuAnchor(event.currentTarget);
    }
    const handleCloseMenu = () => {
        setMenuAnchor(null);
    }
    const handleUnfix = () => {
        if (onFixChange) {
            onFixChange(undefined as any);
        }
        setMenuAnchor(null);
    }
    const handleFixToLeft = () => {
        if (onFixChange) {
            onFixChange('left');
        }
        setMenuAnchor(null);
    }
    const handleFixToRight = () => {
        if (onFixChange) {
            onFixChange('right');
        }
        setMenuAnchor(null);
    }
    const handleHide = () => {
        if (onHiddenChange) {
            onHiddenChange(true);
        }
        setMenuAnchor(null);
    }

    const getStyle = (column: DataColumn) => {
        const result: React.CSSProperties = {
        };

        if (column) {
            if (column.width) {
                result.width = column.width;
            }
            if (column.minWidth) {
                result.minWidth = column.minWidth;
            }
            if (column.maxWidth) {
                result.maxWidth = column.maxWidth;
            }
            if (column.fix === 'left') {
                result.left = column.sticky
                    ? column.sticky + 40
                    : 40;
                result.zIndex = 1000;
                result.position = 'sticky';
                result.backgroundImage = 'linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))';
            }
            if (column.fix === 'right') {
                result.right = column.sticky
                    ? column.sticky + 40
                    : 40;
                result.zIndex = 1000;
                result.position = 'sticky';
                result.backgroundImage = 'linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))';
            }
        }
        return result;
    }

    return (
        <TableHeaderCell
            id={column.name}
            key={column.name}
            align={column.align}
            style={getStyle(column)}>

            <TableHeadCellContent style={{ minWidth: column.minWidth, maxWidth: column.maxWidth, backgroundImage: 'inherit' }}>
                <div style={{ display: 'flex', width: '100%', height: '100%' }}>
                    <div style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', padding: '6px 0' }}>
                        {
                            column.label
                        }
                    </div>
                    {
                        column.sort === 'disabled' || hideSort
                            ? <></>
                            : column.sort === 'asc'
                                ? <ArrowTooltip arrow title={messages.sorting.hint} placement="top">
                                    <TableHeaderSorter onClick={handleSortChange}>
                                        <SortAscIcon />
                                    </TableHeaderSorter>
                                </ArrowTooltip>
                                : column.sort === 'desc'
                                    ? <ArrowTooltip arrow title={messages.sorting.hint} placement="top">
                                        <TableHeaderSorter onClick={handleSortChange}>
                                            <SortDescIcon />
                                        </TableHeaderSorter>
                                    </ArrowTooltip>
                                    : <ArrowTooltip arrow title={messages.sorting.hint} placement="top">
                                        <TableHeaderSorterHover onClick={handleSortChange}>
                                            <SortDescIcon />
                                        </TableHeaderSorterHover>
                                    </ArrowTooltip>
                    }
                    <span className="spacer" />
                    <Button
                        style={{ padding: '2px', minWidth: '36px', maxWidth: '36px', minHeight: '36px', maxHeight: '36px', marginRight: '2px' }}
                        onClick={handleOpenMenu}>

                        <MenuIcon />
                    </Button>
                    <TableHeaderResizer />
                </div>
            </TableHeadCellContent>
            <Menu
                anchorEl={menuAnchor}
                anchorOrigin={{
                    vertical: 'bottom',
                    horizontal: 'left',
                }}
                transformOrigin={{
                    vertical: 'top',
                    horizontal: 'left',
                }}
                keepMounted
                open={Boolean(menuAnchor)}
                onClose={handleCloseMenu}>
                {
                    column.fix !== 'left' &&
                    <MenuItem onClick={handleFixToLeft}>
                        <ListItemIcon>
                            <PinLeftIcon />
                        </ListItemIcon>
                        {messages.fixToLeft}
                    </MenuItem>
                }
                {
                    column.fix !== 'right' &&
                    <MenuItem onClick={handleFixToRight}>
                        <ListItemIcon>
                            <PinRightIcon />
                        </ListItemIcon>
                        {messages.fixToRight}
                    </MenuItem>
                }
                {
                    column.fix &&
                    <MenuItem onClick={handleUnfix}>
                        <ListItemIcon>
                            <UnpinIcon />
                        </ListItemIcon>
                        {messages.unfix}
                    </MenuItem>
                }
                <Divider />
                <MenuItem onClick={handleHide}>
                    <ListItemIcon>
                        <HideIcon />
                    </ListItemIcon>
                    {messages.hide}
                </MenuItem>
            </Menu>
        </TableHeaderCell >
    )
}

const SortAscIcon = () => (
    <SvgIcon fontSize="small" width="24" height="24" overflow="hidden" viewBox="0 0 24 24">
        <g>
            <path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z" />
        </g>
    </SvgIcon>
)
const SortDescIcon = () => (
    <SvgIcon fontSize="small" width="24" height="24" overflow="hidden" viewBox="0 0 24 24">
        <g>
            <path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z" />
        </g>
    </SvgIcon>
)
const MenuIcon = () => (
    <SvgIcon width="24" height="24" overflow="hidden" viewBox="0 0 24 24">
        <g>
            <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />
        </g>
    </SvgIcon>
)
const PinLeftIcon = () => (
    <SvgIcon fontSize="small" width="512" height="512" overflow="hidden" viewBox="0 0 512 512">
        <g>
            <path d="m505.41 144.476-137.886-137.886c-4.25-4.25-9.9-6.59-15.91-6.59s-11.66 2.341-15.909 6.59c-4.25 4.25-6.591 9.9-6.591 15.91s2.341 11.66 6.59 15.91l15.58 15.58-119.957 106.281c-24.641-5.338-50.396-4.701-74.742 1.879-26.421 7.14-50.674 21.201-70.135 40.663-1.407 1.406-2.197 3.314-2.197 5.303s.79 3.897 2.197 5.303l90.156 90.156-159.409 159.408c-11.09 11.09-17.197 25.834-17.197 41.517 0 4.142 3.358 7.5 7.5 7.5 15.683 0 30.427-6.107 41.517-17.197l159.409-159.409 90.156 90.156c1.465 1.464 3.385 2.197 5.304 2.197s3.839-.732 5.304-2.197c19.461-19.461 33.521-43.713 40.662-70.135 6.58-24.348 7.217-50.102 1.879-74.742l106.281-119.958 15.579 15.579c4.25 4.25 9.9 6.59 15.91 6.59s11.661-2.341 15.909-6.59c4.25-4.25 6.591-9.9 6.591-15.91-.001-6.008-2.342-11.658-6.591-15.908zm-467 339.721c-6.27 6.27-14.109 10.4-22.632 12.025 1.625-8.523 5.756-16.362 12.025-22.632l159.409-159.409 10.607 10.607zm265.339-74.692-201.254-201.254c34.561-31.19 81.416-43.425 127.142-32.974l107.087 107.088c10.448 45.726-1.786 92.58-32.975 127.14zm191.054-243.816c-1.416 1.417-3.3 2.196-5.303 2.196s-3.887-.78-5.303-2.197l-95.459-95.458c-2.93-2.928-7.678-2.93-10.607 0-2.929 2.929-2.929 7.678 0 10.606l69.254 69.254-104.159 117.563-98.878-98.878 122.846-108.841c1.548-1.372 2.461-3.321 2.522-5.387.063-2.067-.73-4.068-2.192-5.53l-21.214-21.214c-1.416-1.417-2.196-3.3-2.196-5.303s.78-3.886 2.197-5.303c1.416-1.417 3.3-2.197 5.303-2.197s3.887.78 5.303 2.197l137.887 137.886c1.416 1.417 2.196 3.3 2.196 5.303s-.78 3.886-2.197 5.303z" />
        </g>
    </SvgIcon>
)
const PinRightIcon = () => (
    <SvgIcon fontSize="small" width="512" height="512" overflow="hidden" viewBox="0 0 512 512">
        <g>
            <path d="M6.59 144.48C2.34 148.73 0 154.38 0 160.39C0 166.4 2.35 172.05 6.6 176.3C10.85 180.55 16.5 182.89 22.51 182.89C28.52 182.89 34.17 180.55 38.42 176.3C39.45 175.26 44.65 170.07 53.99 160.72C117.77 232.69 153.19 272.68 160.28 280.68C154.94 305.32 155.58 331.07 162.16 355.42C169.3 381.84 183.36 406.09 202.83 425.55C204.23 426.96 206.14 427.75 208.13 427.75C210.12 427.75 212.03 426.96 213.43 425.55C219.44 419.54 249.49 389.49 303.58 335.39C399.23 431.04 452.37 484.17 463 494.8C474.09 505.89 488.83 511.99 504.52 511.99C508.66 511.99 512.02 508.63 512.01 504.49C512.01 488.81 505.91 474.07 494.82 462.98C484.19 452.35 431.05 399.21 335.4 303.57C389.49 249.48 419.55 219.42 425.56 213.41C427.02 211.95 427.75 210.03 427.75 208.11C427.75 206.19 427.02 204.27 425.56 202.81C406.09 183.35 381.84 169.29 355.42 162.15C331.07 155.57 305.32 154.93 280.68 160.27C272.68 153.18 232.69 117.76 160.72 53.99C170.06 44.64 175.26 39.45 176.3 38.41C180.54 34.16 182.88 28.51 182.88 22.5C182.88 16.49 180.54 10.84 176.29 6.59C172.04 2.34 166.39 0 160.38 0C154.38 0 148.73 2.34 144.48 6.59C144.48 6.59 20.38 130.69 6.59 144.48ZM484.21 473.58C490.48 479.85 494.61 487.69 496.24 496.22C487.71 494.59 479.87 490.46 473.6 484.19C462.98 473.56 409.84 420.43 314.19 324.79L324.8 314.18C409.82 399.2 462.96 452.33 484.21 473.58ZM208.26 409.51C177.07 374.95 164.84 328.09 175.29 282.37C185.99 271.66 271.66 185.98 282.37 175.28C328.1 164.83 374.95 177.06 409.51 208.25C369.26 248.5 228.39 389.38 208.26 409.51ZM167.89 22.5C167.89 24.51 167.11 26.39 165.69 27.81C156.14 37.35 79.78 113.72 70.23 123.27C67.31 126.2 67.3 130.95 70.23 133.88C73.16 136.8 77.91 136.8 80.84 133.87C85.46 129.26 108.54 106.17 150.09 64.62L267.66 168.77L168.78 267.66C103.48 193.95 67.19 153 59.94 144.81C58.57 143.26 56.62 142.35 54.55 142.29C52.48 142.23 50.48 143.02 49.02 144.48C46.9 146.6 29.93 163.58 27.81 165.7C26.39 167.11 24.51 167.89 22.5 167.89C20.5 167.89 18.62 167.11 17.2 165.7C15.78 164.28 15 162.4 15 160.39C15 158.39 15.78 156.51 17.2 155.09C30.99 141.3 141.3 30.99 155.08 17.2C156.5 15.78 158.38 15 160.39 15C162.39 15 164.27 15.78 165.69 17.2C167.11 18.62 167.89 20.5 167.89 22.5Z" />
        </g>
    </SvgIcon>
)
const UnpinIcon = () => (
    <SvgIcon fontSize="small" width="512" height="512" overflow="hidden" viewBox="0 0 512 512">
        <g>
            <path d="M336.71 509.88C341.7 509.88 346.39 507.94 349.92 504.41C353.44 500.88 355.39 496.19 355.39 491.2C355.39 486.21 353.44 481.52 349.92 477.99C346.39 474.47 341.7 472.52 336.71 472.52C335.49 472.52 329.39 472.52 318.41 472.52C323.23 392.83 325.91 348.56 326.44 339.71C344.04 328.38 358.79 312.89 369.22 294.73C380.54 275.03 386.52 252.54 386.52 229.69C386.52 228.04 385.86 226.45 384.69 225.29C383.53 224.12 381.94 223.46 380.29 223.46C373.24 223.46 337.95 223.46 274.44 223.45C274.44 111.16 274.44 48.77 274.44 36.29C274.44 23.27 269.37 11.03 260.16 1.82C257.73 -0.61 253.79 -0.61 251.36 1.82C242.15 11.03 237.08 23.27 237.08 36.29C237.08 48.77 237.08 111.15 237.08 223.45C173.57 223.45 138.29 223.44 131.23 223.44C129.51 223.44 127.95 224.14 126.83 225.27C125.7 226.39 125 227.95 125 229.67C125 252.52 130.99 275.01 142.3 294.71C152.73 312.87 167.48 328.37 185.08 339.7C185.61 348.55 188.29 392.82 193.11 472.51C182.13 472.51 176.04 472.51 174.82 472.51C169.83 472.51 165.14 474.45 161.61 477.98C158.08 481.51 156.14 486.2 156.14 491.19C156.14 496.18 158.08 500.87 161.61 504.4C165.14 507.92 169.83 509.87 174.82 509.87C174.82 509.87 320.52 509.88 336.71 509.88ZM249.53 36.29C249.53 28.93 251.71 21.9 255.76 15.95C259.81 21.9 261.99 28.93 261.99 36.29C261.99 48.77 261.99 111.16 261.99 223.45L249.53 223.45C249.53 123.63 249.53 61.25 249.53 36.29ZM373.91 235.91C371.93 274.51 351.6 309.2 318.63 329.91C306.05 329.91 205.47 329.9 192.89 329.9C159.92 309.18 139.59 274.49 137.62 235.9C184.87 235.9 350.28 235.91 373.91 235.91ZM170.41 486.79C171.59 485.61 173.15 484.96 174.82 484.96C186.02 484.96 275.69 484.97 286.89 484.97C290.33 484.97 293.12 482.18 293.12 478.74C293.12 475.31 290.33 472.52 286.89 472.52C281.47 472.52 254.37 472.52 205.58 472.51L197.71 342.35L313.81 342.36C308.87 423.97 306.13 469.3 305.59 478.37C305.48 480.08 306.09 481.76 307.27 483.01C308.44 484.26 310.08 484.97 311.8 484.97C314.29 484.97 334.22 484.97 336.71 484.97C338.37 484.98 339.93 485.62 341.11 486.8C342.29 487.97 342.93 489.54 342.93 491.2C342.93 492.86 342.29 494.43 341.11 495.6C339.93 496.78 338.37 497.43 336.71 497.43C320.52 497.43 191 497.42 174.81 497.42C173.15 497.41 171.59 496.77 170.41 495.59C169.24 494.42 168.59 492.85 168.59 491.19C168.59 489.53 169.24 487.96 170.41 486.79Z" />
            <path d="M481.71 486.39L45.52 57.24" strokeWidth="48" stroke="currentColor" />
        </g>
    </SvgIcon>
)
const HideIcon = () => (
    <SvgIcon fontSize="small" width="24" height="24" overflow="hidden" viewBox="0 0 24 24">
        <g>
            <path d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z" />
        </g>
    </SvgIcon>
)