/* eslint-disable react/no-unused-prop-types */
import { Typography, Container as MuiContainer, Box } from '@mui/material';

import { mergeProps } from '../Util';
import Logo from '../Logo';
import { styled } from '../Theme';

export interface FooterProps {
  dark?: false | true;
  className?: string;
  copyStart?: number | string;
  brand?: string;
  style?: React.CSSProperties;
  addon?: React.ReactNode;
}

export default function Footer({ ...props }: FooterProps) {
  const newProps = mergeProps(props, Footer, ['dark', 'style']);
  const { className = '', copyStart = '2017', style = {}, brand = 'ArcBlock', dark = false, addon = null } = newProps;

  const endYearString = `${new Date().getFullYear()}`;
  const copyStartString = `${copyStart}`;
  const copyYear = endYearString === copyStartString ? endYearString : `${copyStartString}-${endYearString}`;

  return (
    <Container className={className} style={style} dark={dark}>
      <MuiContainer maxWidth={false}>
        <Typography component="div" className="footer">
          <Typography component="p" className="footer-item">
            <span className="footer-copy">Copyright &copy; {copyYear} </span>
            <span className="footer-brand">{brand}</span>
          </Typography>
          {addon && (
            <Typography
              component="div"
              className="footer-item"
              sx={{ order: { xs: '-1', md: 'initial' }, ml: { xs: 0, md: 'auto' }, width: { xs: '100%', md: 'auto' } }}>
              {addon}
            </Typography>
          )}
          <Typography component="p" className="footer-item" style={{ justifyContent: 'flex-end', flexShrink: 0 }}>
            Powered by
            <Logo mode={dark ? 'light' : 'dark'} layout="horizontal" className="logo-container" />
          </Typography>
        </Typography>
      </MuiContainer>
      <Box
        sx={{
          position: 'absolute',
          right: 16,
          bottom: 0,
          fontSize: 12,
          color: 'transparent',
          '::selection': { background: '#000', color: '#fff' },
        }}>
        {window?.blocklet?.version}
      </Box>
    </Container>
  );
}

type ContainerProps = {
  dark: boolean;
};

const Container = styled('div', {
  shouldForwardProp: (prop) => prop !== 'dark',
})<ContainerProps>`
  position: relative;
  margin-top: ${({ theme }) => theme.spacing(2)};
  padding: 24px 0 32px;
  border-top: 1px solid ${(props) => props.theme.palette.divider};
  box-sizing: border-box;
  width: 100%;

  @media (max-width: 540px) {
    padding: 8px 0;
  }

  .footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;

    .footer-item {
      color: ${(props) => {
        return props.theme.palette.text.hint;
      }};
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      font-size: 0.9rem;
    }

    .footer-brand {
      margin-left: 8px;
      margin-right: 8px;
    }

    .logo-container {
      margin-left: 24px;
      width: 90px;
      opacity: 0.5;
    }

    @media (max-width: 540px) {
      .footer-item {
        font-size: 0.7rem;
      }

      .logo-container {
        margin: 0 0 0 16px;
        width: 70px;
        height: 40px;
      }
    }

    @media (max-width: 380px) {
      .footer-item {
        font-size: 0.65rem;
      }

      .logo-container {
        margin: 0 0 0 8px;
        height: 24px;
      }
    }
  }
`;
