import styled from 'styled-components';
import { State } from './index'
import {
  rem,
} from '../../style/function.style';

export const Container = styled.div<{
  isEdit: boolean;
  show: boolean;
  bg?: string;
}>`
  position: ${props => props.isEdit ? 'absolute' : 'fixed'};
  bottom: 0;
  left: 0;
  z-index: 11;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  transition: background 0.3s ease;
  display: ${props => props.show ? 'block' : 'none'};
  &.unfold-con {
    background: ${props => props.bg ? `url(${props.bg}) no-repeat` : 'rgba(0, 0, 0, 0.6)'};
    background-size: 100% auto;
  }
`

export const PanelContainer = styled.div<{
  aniType: State['aniType'],
  height?: string,
  gapWidth?: string,
  background?: {
    topImage?: {
      url: string,
    };
    centerImage?: {
      url: string,
    };
    bottomImage?: {
      url: string,
    };
  },
  overflow?: 'visible' | 'hidden'
}>`
  ${
    props => props.overflow ? `overflow: ${props.overflow};` : 'overflow: hidden;'
  }
  ${
    props => {
      const { background } = props;
      if (background) {
        const { topImage, centerImage, bottomImage } = background;
        let backgroundStyle = `
          background-image: ${topImage && topImage.url ? `url(${topImage.url})` : ''}, ${bottomImage && bottomImage.url ? `url(${bottomImage.url})` : ''};
          background-position: ${topImage && topImage.url ? `left top` : ''}, ${bottomImage && bottomImage.url ? `left bottom` : ''};
          background-repeat: no-repeat;
          background-size: 100% ${rem(60)};
          &::before{
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            pointer-events: none;
            top: ${rem(60)};
            bottom: ${rem(60)};
            background-image: ${centerImage && centerImage.url ? `url(${centerImage.url})` : ''};
            background-repeat: repeat-y;
            background-size: 100% auto;
          }
        `
        return backgroundStyle
      } else {
        return `
          background-color: #FFFFFF;
          border-radius: ${rem(20)} ${rem(20)} 0 0;
        `
      }
    }
  }
  /* background-color: #F2F2F2; */
  position: absolute;
  bottom: 0;
  left: ${props => props.gapWidth ? props.gapWidth : rem(24)};
  right: ${props => props.gapWidth ? props.gapWidth : rem(24)};
  /* border: 1px solid #CDB58B; */
  border-bottom: none;
  height: 0;
  transition: height 0.3s ease; 
  &.unfold-panel {
    height: ${props => props.height ? props.height : '70%'};
  }
`

export const PanelContentContainer = styled.div<{
  overflow?: 'visible' | 'hidden'
}>`
  position: relative;
  height: 100%;
  ${
    props => props.overflow ? `overflow: ${props.overflow};` : 'overflow: hidden;'
  }
  display: flex;
  flex-direction: column;
`