import React, {ReactElement, ReactNode, useState} from 'react';
import {useMediaQuery} from "react-responsive";
import CardView from "../../../SVG/ViewStyleCard";
import ListView from "../../../SVG/ViewStyleList";

export type Order = 'ASC' | 'DESC'

type ListHeaderProps = {
    children?: ReactNode
    order?: Order
    order_by?: string
    setOrder?: (order_by: string, order: Order) => void
    handleViewChange: (value: boolean) => void;
}

const toggleOrderBy: Record<Order, Order> = {
    'ASC': 'DESC',
    'DESC': 'ASC'
}

/**
 * For the list head to work properly it need to passed children and their flex property manually match the columns of the list-row
 */
const ListHeader = ({children, setOrder, order, order_by,handleViewChange}: ListHeaderProps) => {


    /**
     * If the head has ordering functionality the children need to tranformed
     * adding on click function et...
     */

    let newChildren = children
    if (order && setOrder) {
        newChildren = React.Children.map(children as ReactElement, (child, i) => {

            if (child.props.orderable) {

                return React.cloneElement(child, {

                    onClick: () => {

                        setOrder(
                            child.props.name,
                            child.props.name === order_by ? toggleOrderBy[order] : 'ASC'
                        )

                    },
                    // @ts-ignore
                    activeOrder: child.props.name === order_by && order,
                    // @ts-ignore
                    ...child.props,

                });
            } else return child

            // }
            // @ts-ignore
            // else if(child.type?.displayName === 'SelectGroup') {
            //     /**
            //      * incase of select group map and transform thew children of the select group
            //      */
            //     // @ts-ignore
            //     return React.cloneElement(child, {
            //         // @ts-ignore
            //         children: child?.props?.children.map((child: ReactElement) => {
            //             return makeFilteredChild(child)
            //         }),
            //         key: `group-${i}`
            //     });
            // }
        });
    }
    const isDesktop = useMediaQuery({query: '(min-width: 1400px)'})
    const isSmallDesktop = useMediaQuery({query: '(max-width: 1399px)'})


    const [listView, setListView] = useState(true);

    const setIsListView = (newValue: boolean) => {
        setListView(newValue);
        handleViewChange && handleViewChange(newValue); // Pass the value to the callback function
    };
    return (
        <div className={`col-xxl-12 list-head ${(isDesktop && listView) && "display"}`}>
            {
                newChildren
            }
            {/*<ListHeadColumn flex='0 0 2vw'></ListHeadColumn>*/}
            <div className={`d-flex justify-content-end change-view ${isDesktop && "display"}`}>
                <button disabled={listView} onClick={() => setIsListView(true)}>
                    <ListView hoverColor={'$title-color'} color={listView ? '$title-color':'#1a73e8'}/>
                </button>
                <button disabled={!listView} onClick={() => setIsListView(false)}>
                    <CardView hoverColor={'$title-color'} color={listView ?'#1a73e8': '$title-color'}/>
                </button>
            </div>
        </div>
    );
}

export default ListHeader;