import styled, { css } from 'styled-components';
import { getSpacing } from '../../../../utils/index.js';

const ButtonSheetImageWrapper = styled.figure `
  height: ${({ imgHeight }) => imgHeight || '162px'};
  margin: ${getSpacing('s00')};
  overflow: hidden;
  position: relative;

  button {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 2;
  }
`;
const ImageStyled = styled.img `
  width: 100%;
  height: 100%;

  ${({ asHeader }) => asHeader &&
    css `
      border-radius: ${({ theme: { radius } }) => `${radius.roundedC} ${radius.roundedC} ${radius.roundedNone} ${radius.roundedNone}`};
    `};

  ${({ objectFit }) => {
    switch (objectFit) {
        case 'contain':
            return css `
          object-fit: contain;
        `;
        case 'fill':
            return css `
          object-fit: fill;
        `;
        case 'none':
            return css `
          object-fit: none;
        `;
        case 'scale-down':
            return css `
          object-fit: scale-down;
        `;
        default:
            return css `
          object-fit: cover;
        `;
    }
}};

  ${({ objectPosition }) => {
    switch (objectPosition) {
        case 'bottom':
            return css `
          object-position: bottom;
        `;
        case 'inherit':
            return css `
          object-position: inherit;
        `;
        case 'initial':
            return css `
          object-position: initial;
        `;
        case 'left':
            return css `
          object-position: left;
        `;
        case 'revert':
            return css `
          object-position: revert;
        `;
        case 'revert-layer':
            return css `
          object-position: revert-layer;
        `;
        case 'right':
            return css `
          object-position: right;
        `;
        case 'top':
            return css `
          object-position: top;
        `;
        case 'unset':
            return css `
          object-position: unset;
        `;
        default:
            return css `
          object-position: center;
        `;
    }
}}
`;

export { ButtonSheetImageWrapper, ImageStyled };
