import React from 'react';
import {
  Box,
  BoxProps,
  Menu,
  MenuProps,
  Switch,
  Typography,
} from '@mui/material';
import { styled } from '@mui/system';

interface ButtonBoxProps extends BoxProps {}

export const ButtonBox = ({ children, ...props }: ButtonBoxProps) => {
  return (
    <Box
      {...props}
      borderRadius={'20px'}
      fontSize={'14px'}
      border={'1px solid #f0f0f0'}
      px={4}
      py={2}
    >
      {children}
    </Box>
  );
};

export const Card = styled(Box)(({ theme }) => ({
  borderRadius: '8px',
  background:
    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.2)' : 'rgb(244, 246, 248)',
  cursor: 'pointer',
  // padding: '8px',
}));

export const OneLineTypography = styled(Typography)`
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
`;

export const Separator = styled(Box)(({ theme }) => ({
  height: '1px',
  width: '100%',
  background: theme.palette.mode === 'dark' ? '#1e2325' : '#f0f0f0',
}));

export const StyledMenu = styled((props: MenuProps) => (
  <Menu
    elevation={0}
    anchorOrigin={{
      vertical: 'bottom',
      horizontal: 'right',
    }}
    transformOrigin={{
      vertical: 'top',
      horizontal: 'right',
    }}
    {...props}
  />
))(({ theme }) => ({
  '& .MuiPaper-root': {
    borderRadius: 6,
    marginTop: theme.spacing(1),
    minWidth: 180,
    color:
      theme.palette.mode === 'light'
        ? 'rgb(55, 65, 81)'
        : theme.palette.grey[300],
    // boxShadow:
    //   'rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px',
    boxShadow:
      'rgb(145 158 171 / 24%) 0px 0px 2px 0px, rgb(145 158 171 / 24%) -20px 20px 40px -4px',
    '& .MuiMenu-list': {
      padding: '0px 8px',
    },
    '& .MuiMenuItem-root': {
      padding: '12px 24px',
      borderRadius: '8px',
      '& .MuiSvgIcon-root': {
        fontSize: 18,
        color: theme.palette.text.secondary,
        marginRight: theme.spacing(1.5),
      },
      '&:active': {
        // backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
      },
    },
  },
}));

export const ThemeSwitch = styled(Switch)(({ theme }) => ({
  width: 62,
  height: 34,
  padding: 7,
  '& .MuiSwitch-switchBase': {
    margin: 1,
    padding: 0,
    transform: 'translateX(6px)',
    '&.Mui-checked': {
      color: '#fff',
      transform: 'translateX(22px)',
      '& .MuiSwitch-thumb:before': {
        backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 20 20"><path fill="${encodeURIComponent(
          '#fff'
        )}" d="M4.2 2.5l-.7 1.8-1.8.7 1.8.7.7 1.8.6-1.8L6.7 5l-1.9-.7-.6-1.8zm15 8.3a6.7 6.7 0 11-6.6-6.6 5.8 5.8 0 006.6 6.6z"/></svg>')`,
      },
      '& + .MuiSwitch-track': {
        opacity: 1,
        backgroundColor: theme.palette.mode === 'dark' ? '#8796A5' : '#aab4be',
      },
    },
  },
  '& .MuiSwitch-thumb': {
    backgroundColor: theme.palette.mode === 'dark' ? '#003892' : '#001e3c',
    width: 32,
    height: 32,
    '&:before': {
      content: "''",
      position: 'absolute',
      width: '100%',
      height: '100%',
      left: 0,
      top: 0,
      backgroundRepeat: 'no-repeat',
      backgroundPosition: 'center',
      backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 20 20"><path fill="${encodeURIComponent(
        '#fff'
      )}" d="M9.305 1.667V3.75h1.389V1.667h-1.39zm-4.707 1.95l-.982.982L5.09 6.072l.982-.982-1.473-1.473zm10.802 0L13.927 5.09l.982.982 1.473-1.473-.982-.982zM10 5.139a4.872 4.872 0 00-4.862 4.86A4.872 4.872 0 0010 14.862 4.872 4.872 0 0014.86 10 4.872 4.872 0 0010 5.139zm0 1.389A3.462 3.462 0 0113.471 10a3.462 3.462 0 01-3.473 3.472A3.462 3.462 0 016.527 10 3.462 3.462 0 0110 6.528zM1.665 9.305v1.39h2.083v-1.39H1.666zm14.583 0v1.39h2.084v-1.39h-2.084zM5.09 13.928L3.616 15.4l.982.982 1.473-1.473-.982-.982zm9.82 0l-.982.982 1.473 1.473.982-.982-1.473-1.473zM9.305 16.25v2.083h1.389V16.25h-1.39z"/></svg>')`,
    },
  },
  '& .MuiSwitch-track': {
    opacity: 1,
    backgroundColor: theme.palette.mode === 'dark' ? '#8796A5' : '#aab4be',
    borderRadius: 20 / 2,
  },
}));

export const Input = styled('input')({
  display: 'none',
});

export const BlurBG = ({ img }: { img: string | undefined }) => {
  return (
    <Box
      sx={{
        backgroundImage: `url(${img})`,
        filter: 'blur(200px)',
        position: 'absolute',
        top: '-100px',
        left: 0,
        right: 0,
        height: '6%',
        zIndex: 0,
      }}
    />
  );
};

export const BGShadow = styled(Box)`
  position: absolute;
  width: 100%;
  height: 100px;
  background: linear-gradient(180deg, #1a1c1f 0%, rgba(15, 17, 20, 0) 100%);
  transform: matrix(1, 0, 0, -1, 0, 0);
  left: 0;
  bottom: 0;
`;

export const UploadInput = styled('input')({
  display: 'none',
});

export const SquareBox = styled(Box)`
  position: relative;
  aspect-ratio: 1 / 1;
`;