import { CaretDownFilled, CaretLeftFilled, CaretRightFilled, CaretUpFilled } from '@ant-design/icons';
import { Button } from 'antd';
import React, { useState, useEffect } from 'react';
import { useMediaQuery } from 'react-responsive';

const ExpandCollapse = ({ children }) => {
    const [collapse, setCollapse] = useState(true);

    const isTablet = useMediaQuery({
        query: '(max-width: 850px)'
    });

    const isLaptopp = useMediaQuery({
        query: '(min-width: 1080px)'
    });

    useEffect(() => {
        if(isLaptopp) {
            setCollapse(false);
        } else {
            setCollapse(true);
        }
        return () => {}
    }, [isLaptopp]);

    return (
        <>
            <div style={{
                position: 'relative',
                display: 'flex',
                flexDirection: 'row',
                alignItems: 'center',
                gap: isTablet ? 5 : 15,
                height: '100%'
            }}>
                {!isLaptopp && <Button className='expandable-options-btn' aria-label='expandable-options-button'
                    type='text' size='small'
                    onClick={() => setCollapse(!collapse)}
                >
                    {collapse ? (isTablet?<CaretDownFilled /> : <CaretLeftFilled />)
                        : (isTablet? <CaretUpFilled />: <CaretRightFilled />)}
                </Button>}

                <div style={{
                    overflow: 'hidden',
                    transition: 'all 0.5s ease-out',
                    maxWidth: !collapse ? '400px' : '0px',
                    maxHeight: !collapse ? '300px' : '0px',
                    display: 'flex',
                    alignItems: 'center',
                    flexDirection: isTablet ? 'column' : 'row',
                    gap: isTablet ? 5 : 15,
                    position: isTablet ? 'absolute' : 'initial',
                    zIndex: 1000,
                    top: 50,
                    right: 0,
                    backgroundColor: isTablet ? 'var(--background-color-custom-1-70)' : 'unset',
                    padding: isTablet ? !collapse? '0.5rem': 0 : 0,
                    borderRadius: isTablet? '0.5rem': 0,
                    boxShadow: !isTablet? 'none':'1px 3px 10px #0000008f'
                }}>
                    {children}
                </div>
            </div>
            <div style={{
                display: !collapse? (isTablet? 'block': 'none'): 'none',
                position: 'absolute',
                inset: 0,
                zIndex: 999
            }} onClick={() => setCollapse(true)}/>
        </>
    );
}

export default ExpandCollapse;
