import { Tune } from '@mui/icons-material'
import { Box, styled } from '@mui/material'
import { useEffect, useState } from 'react'

const StyledButtonWrapper = styled(Box)<{ size: 'regular' | 'large' }>(
  ({ theme, size }) => ({
    width: size === 'regular' ? '40px' : '50px',
    height: size === 'regular' ? '40px' : '50px',
    flexShrink: 0,
    border: theme.borders.grayLight,
    display: 'flex',
    position: 'relative',
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: '10px',
    cursor: 'pointer',
    '&:active': {
      border: `1px solid ${theme.palette.primary.main}`,
    },
    transition: 'border 0.1s ease-in-out',
  }),
)

const StyledNotify = styled(Box)(({ theme }) => ({
  height: '5px',
  width: '5px',
  backgroundColor: theme.palette.error.main,
  position: 'absolute',
  borderRadius: '50%',
  top: 5,
  right: 5,
}))

export default function FilterButton({
  onClick,
  size = 'large',
  filtersApplied,
  ...props
}: {
  onClick: (e: any) => void
  size?: 'regular' | 'large'
  filtersApplied?: any
}) {
  const handleClick = (e) => {
    e.stopPropagation()
    if (!onClick) return
    onClick(e)
  }

  return (
    <StyledButtonWrapper size={size} {...props} onClick={handleClick}>
      {filtersApplied && <StyledNotify />}
      <Tune />
    </StyledButtonWrapper>
  )
}
