import { type SxProps } from '@mui/material';

import phone from './shells/Phone';
import macbook from './shells/Macbook';
import { styled } from '../../Theme';

const map = {
  phone,
  macbook,
};

export interface ScreenshotProps extends React.ComponentProps<'div'> {
  width?: number;
  type?: string;
  sx?: SxProps;
}

function Screenshot({ width = 0, children, type = 'phone', ...rest }: ScreenshotProps) {
  const _type = type.toLowerCase();

  const { Shell, ratio, screenData, width: defaultWidth } = map[(_type as keyof typeof map) || 'phone'];

  const Root = styled('div')`
    position: relative;
    display: inline-block;
    width: ${width || `${defaultWidth}px`};
    &:after {
      display: block;
      content: '';
      padding-bottom: ${ratio * 100}%;
    }
    > svg {
      display: block;
    }

    .screenshot--container {
      position: absolute;
      left: ${screenData.x * 100}%;
      top: ${screenData.y * 100}%;
      width: ${screenData.width * 100}%;
      height: ${screenData.height * 100}%;
      ${screenData.radius ? `border-radius: ${screenData.radius}` : ''};
      background-color: #fff;
      overflow: hidden;
      > img {
        display: block;
        width: 100%;
        height: 100%;
        min-width: 100%;
        min-height: 100%;
      }
    }

    .absolute-size {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }
  `;

  return (
    <div style={{ display: 'flex', justifyContent: 'center' }}>
      <Root {...rest}>
        <Shell className="absolute-size" />
        <div className="screenshot--container">{children}</div>
      </Root>
    </div>
  );
}

export default Screenshot;
