import {
    styled,
    IconButton,
    InputBase,
    TableCell,
    TableHead,
    TextField,
    TableRow,
    Button,
    CircularProgress,
    TableContainer,
    Autocomplete,
    Popper,
    Box,
    Paper,
    Tooltip,
    Typography,
} from "@mui/material";
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { HistoryPopup } from "./body.history.popup";
import { HistoryTooltip } from "./body.history.tooltip";
import { FilterPopop } from "./filter.popup";

export const TablePanel = styled(TableContainer)(({ theme }) => ({
    width: '100%',
    background: theme.palette.background.default,
}));

export const BodyCellContent = styled(Typography)(() => ({
    maxWidth: '200px',
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
})) as typeof Typography;

export const BodyCheckContent = styled('div')(() => ({
    width: '100%',
    display: 'flex',
    justifyContent: 'center',
}));

export const BodyInputText = styled(TextField)(() => ({
    width: '100%',
}));

export const BodyInputDate = styled(DatePicker)(() => ({
    width: '100%',
}));

export const BodyInputDateField = styled(TextField)(() => ({
    width: 'calc(100% - 15px)',
}));

export const BodyInputAutocomplete = styled(Autocomplete)(() => ({
    width: '100%',
    '& .MuiAutocomplete-inputRoot': {
        paddingRight: '0 !important'
    }
}));

export const TableHeader = styled(TableHead)(({ theme }) => ({
    top: 0,
    position: 'sticky',
    background: theme.palette.background.paper,
    zIndex: 1200,
}));

export const TableHeaderFixedCell = styled(TableCell)(({ theme }) => ({
    width: '40px',
    minWidth: '40px',
    maxWidth: '40px',
    position: 'sticky',
    padding: '0px',
    overflow: 'hidden',
    borderWidth: '0px',
    background: theme.palette.background.paper,
    zIndex: 999
}));

export const TableHeadFixedContent = styled('div')(({ theme }) => ({
    height: '36px',
    minHeight: '36px',
    maxHeight: '36px',
    width: '36px',
    minWidth: '36px',
    maxWidth: '36px',
    padding: '9px 2px',
    overflow: 'hidden',
    borderStyle: 'solid',
    borderWidth: '0px 0px 1px 0px',
    borderColor: theme.palette.divider,
    background: theme.palette.background.paper
}));

export const TableHeadRow = styled(TableRow)(({ theme }) => ({
    background: theme.palette.background.default
}));

export const TableHeaderCell = styled(TableCell)(({ theme }) => ({
    padding: '0px',
    overflow: 'hidden',
    borderWidth: '0px',
    background: theme.palette.background.paper
}));

export const TableHeadCellContent = styled('div')(({ theme }) => ({
    height: '36px',
    minHeight: '36px',
    maxHeight: '36px',
    padding: '9px 0px 9px 5px',
    overflow: 'hidden',
    borderStyle: 'solid',
    borderWidth: '0px 0px 1px 0px',
    borderColor: theme.palette.divider,
    background: theme.palette.background.paper
}));

export const TableHeaderResizer = styled('div')(({ theme }) => ({
    width: '2px',
    borderWidth: '0px 1px',
    borderStyle: 'solid',
    borderColor: theme.palette.primary.light,
    opacity: 0,
    cursor: 'col-resize',
    margin: '-5px 0',
    '&:hover': {
        opacity: 1,
        transition: 'opacity 0.125s ease-in-out',
    }
}));

export const TableHeaderSorter = styled(IconButton)(({ theme }) => ({
    width: '32px',
    height: '32px',
}));

export const TableHeaderSorterHover = styled(IconButton)(() => ({
    opacity: 0,
    width: '32px',
    height: '32px',
    '&:hover': {
        opacity: 1,
        transition: 'opacity 0.125s ease-in-out',
    }
}));

export const TableBodyFixedCell = styled(TableCell)(({ theme }) => ({
    padding: '0px',
    position: 'sticky',
    overflow: 'hidden',
    borderWidth: '0px',
    background: theme.palette.background.default,
    zIndex: 999,
}));

export const TableBodyFixedContent = styled('div')(({ theme }) => ({
    height: '36px',
    minHeight: '36px',
    maxHeight: '36px',
    width: '36px',
    minWidth: '36px',
    maxWidth: '36px',
    padding: '9px 2px',
    overflow: 'hidden',
    borderStyle: 'solid',
    borderWidth: '0px 0px 1px 0px',
    borderColor: theme.palette.divider,
    background: theme.palette.background.default
}));

export const TableBodyRowHeight = 55;

export const TableBodyRow = styled(TableRow)(({ theme }) => ({
    background: theme.palette.background.default
}));

export const TableBodyCell = styled(TableCell)(({ theme }) => ({
    padding: '0px',
    overflow: 'hidden',
    borderWidth: '0px',
    background: theme.palette.background.default,
    '&:hover .datatable-cell-history-button': {
        opacity: 1
    }
}));

export const TableBodyCellContent = styled('div')(({ theme }) => ({
    display: 'flex',
    height: '54px',
    minHeight: '54px',
    maxHeight: '54px',
    padding: '0px 0px 0px 5px',
    overflow: 'hidden',
    alignContent: 'center',
    alignItems: 'center',
    borderStyle: 'solid',
    borderWidth: '0px 0px 1px 0px',
    borderColor: theme.palette.divider,
    background: theme.palette.background.default,
}));

export const TableArrowTooltip = styled(Tooltip)(({ theme }) => ({
    arrow: {
    },
    tooltip: {
        boxShadow: theme.shadows[1],
        fontSize: 12,
    },
}));

export const TableBodyHistoryButtonContent = styled('span')(() => ({
    position: 'absolute',
    top: '6px',
    right: '18px',
}));

export const TableBodyHistoryMenuPopup = styled(HistoryPopup as any)(() => ({
    maxWidth: '400px',
    maxHeight: '627px',
    zIndex: '3000 !important',
    '& > div': {
        maxWidth: '400px',
        maxHeight: '627px',
        overflow: 'auto',
    }
}));

export const TableBodyHistoryButton = styled(IconButton)(() => ({
    width: '16px !important',
    height: '16px !important',
}));

export const TableBodyCellHistory = styled(HistoryTooltip as any)(() => ({
    opacity: 0,
    width: '16px !important',
    height: '16px !important',
}));


export const TableBodySummaryRow = styled(TableRow)(({ theme }) => ({
    bottom: 0,
    position: 'sticky',
    background: theme.palette.background.paper,
    zIndex: 1200,
}));

export const TableBodySummaryCell = styled(TableCell)(({ theme }) => ({
    padding: '0px',
    overflow: 'hidden',
    borderWidth: '0px',
    background: theme.palette.background.paper
}));

export const TableBodySummaryCellContent = styled('div')(({ theme }) => ({
    display: 'flex',
    height: '54px',
    minHeight: '54px',
    maxHeight: '54px',
    padding: '0px 0px 0px 5px',
    overflow: 'hidden',
    alignContent: 'center',
    alignItems: 'center',
    borderStyle: 'solid',
    borderWidth: '1px 0px 0px 0px',
    borderColor: theme.palette.divider,
    background: theme.palette.background.paper
}));

export const TableBodySummaryFixedCell = styled(TableCell)(({ theme }) => ({
    padding: '0px',
    overflow: 'hidden',
    borderWidth: '0px',
    background: theme.palette.background.paper,
    zIndex: 1200,
}));

export const TableBodySummaryFixedContent = styled('div')(({ theme }) => ({
    display: 'flex',
    width: '35px',
    height: '54px',
    minHeight: '54px',
    maxHeight: '54px',
    padding: '0px 0px 0px 5px',
    overflow: 'hidden',
    alignContent: 'center',
    alignItems: 'center',
    borderStyle: 'solid',
    borderWidth: '1px 0px 0px 0px',
    borderColor: theme.palette.divider,
    background: theme.palette.background.paper,
}));

export const OperationSelect = styled(InputBase)(({ theme }) => ({
    'label + &': {
        marginTop: theme.spacing(3),
    },
    '& .MuiInputBase-input': {
        borderRadius: 0,
        position: 'relative',
        border: '0px solid transparent',
        paddingLeft: '8px',
        paddingRight: '8px !important',
        paddingTop: '8px',
        paddingBottom: '0px',
        margin: '6px 0px',
        '&:focus': {
            borderRadius: 0,
            border: '0px solid transparent',
        },
    },
}));

export const FilterTextField = styled(TextField)(({ theme }) => ({
    '& .filter-clear-button': {
        width: '24px',
        height: '24px',
        opacity: 0,
    },
    '&:hover .filter-clear-button': {
        opacity: 1,
    },
}));

export const FilterAutocompleteField = styled(Autocomplete)(({ theme }) => ({
    width: 'calc(100% - 32px)',
    '& .filter-clear-button': {
        width: '24px',
        height: '24px',
        opacity: 0,
    },
    '& .MuiAutocomplete-inputRoot': {
        paddingRight: '0 !important',
    },
}));

export const FilterLabel = styled('div')(() => ({
    maxWidth: '200px',
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
}));

export const FilterInputContainer = styled('div')(() => ({
    display: 'flex',
    width: '297px',
    maxWidth: '297px',
    alignItems: 'center',
    '& .filter-clear-button': {
        width: '24px',
        height: '24px',
        marginLeft: '8px',
        opacity: 0.025,
    },
    '&:hover .filter-clear-button': {
        opacity: 1,
    },
}));

export const FiltersContainer = styled('div')(() => ({
    width: 'calc(100% + 16px)',
    minWidth: '440px',
    maxHeight: '370px',
    marginRight: '-16px',
    overflowX: 'hidden',
    overflowY: 'visible'
}));

export const FilterActionsContainer = styled('div')(() => ({
    display: 'flex',
    width: '100%',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginTop: '32px',
}));

export const FilterPopover = styled(FilterPopop as any)(() => ({
    width: 'fit-content',
    minWidth: '450px',
    maxWidth: '600px',
    height: '577px',
    minHeight: '577px',
    maxHeight: '577px',
    zIndex: 1300
}));

export const PopupPanel = styled(Popper)(() => ({
    zIndex: 2000,
}))

export const TopPopupArrow = styled('div')(({ theme }) => ({
    width: '8px',
    height: '8px',
    bottom: '-4px',
    color: theme.palette.background.paper,
    "&::before": {
        content: '""',
        width: '8px',
        height: '8px',
        zIndex: '-1',
        transform: 'rotate(45deg)',
        backgroundColor: theme.palette.background.paper,
        position: 'absolute',
        backgroundImage: 'linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))',
        borderWidth: '0px 1px 1px 0px',
        borderColor: 'rgba(0, 0, 0, 0.25)',
        borderStyle: 'solid'
    }
}))

export const BottomPopupArrow = styled('div')(({ theme }) => ({
    width: '8px',
    height: '8px',
    top: '-4px',
    color: theme.palette.background.paper,
    "&::before": {
        content: '""',
        width: '8px',
        height: '8px',
        zIndex: '-1',
        transform: 'rotate(45deg)',
        backgroundColor: theme.palette.background.paper,
        position: 'absolute',
        backgroundImage: 'linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))',
        borderWidth: '1px 0px 0px 0px',
        borderColor: 'rgba(0, 0, 0, 0.25)',
        borderStyle: 'solid'
    }
}))

export const LeftPopupArrow = styled('div')(({ theme }) => ({
    width: '8px',
    height: '8px',
    right: '-4px',
    color: theme.palette.background.paper,
    "&::before": {
        content: '""',
        width: '8px',
        height: '8px',
        zIndex: '-1',
        transform: 'rotate(45deg)',
        backgroundColor: theme.palette.background.paper,
        position: 'absolute',
        backgroundImage: 'linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))',
        borderWidth: '0px 1px 0px 0px',
        borderColor: 'rgba(0, 0, 0, 0.25)',
        borderStyle: 'solid'
    }
}))


export const RightPopupArrow = styled('div')(({ theme }) => ({
    width: '8px',
    height: '8px',
    left: '-4px',
    color: theme.palette.background.paper,
    "&::before": {
        content: '""',
        width: '8px',
        height: '8px',
        zIndex: '-1',
        transform: 'rotate(45deg)',
        backgroundColor: theme.palette.background.paper,
        position: 'absolute',
        backgroundImage: 'linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))',
        borderWidth: '0px 0px 1px 0px',
        borderColor: 'rgba(0, 0, 0, 0.25)',
        borderStyle: 'solid'
    }
}))

export const PopoverRoot = styled(Paper)(({ theme }) => ({
    backgroundColor: theme.palette.background.paper,
    maxWidth: 1000,
}))

export const PopoverContent = styled(Box)(({ theme }) => ({
    padding: theme.spacing(2)
}))

export const ActionBar = styled('div')(({ theme }) => ({
    width: 'calc(100% - 32px)',
    height: '36px',
    minHeight: '36px',
    maxHeight: '36px',
    padding: '9px 16px',
    position: 'relative',
    display: 'flex'
}));

export const PaginatorContainer = styled('ul')(() => ({
    display: 'flex',
    listStyleType: 'none',
}));

export const PaginatorItem = styled('li')(() => ({
}));

export const PaginatorButton = styled(Button)(() => ({
    width: '32px',
    height: '32px',
    minWidth: '48px',
}));

export const ActionCircularProgress = styled(CircularProgress)(() => ({
    width: '36px !important',
    height: '36px !important',
    position: 'absolute',
    fontSize: '20px',
    top: '0px',
    left: '-12px',
}));

export const TableActionSeparator = styled('div')(({ theme }) => ({
    width: '1px',
    height: '100%',
    margin: '0px 20px 0px 5px',
    background: theme.palette.action.disabled,
}));