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

export const Container = styled.div<{
  show: boolean;
}>`
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 9;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0);
  transition: background 0.3s ease;
  display: ${props => props.show ? 'block' : 'none'};
  &.unfold-con {
    background: rgba(0, 0, 0, 0.5);
  }
`

export const PanelContainer = styled.div<{
  aniType: State['aniType']
}>`
  width: 100vw;
  overflow: hidden;

  background: #FFFFFF;
  position: absolute;
  bottom: 0;
  border-top-left-radius: ${rem(17)};
  border-top-right-radius: ${rem(17)};

  height: 0;
  transition: ${
    props => props.aniType === 'unfold'
      ? 'height 0.5s ease-out'
      : 'height 0.3s ease'
  }; 
  &.unfold-panel {
    height: 80vh;
  }
`
export const PanelContentContainer = styled.div`
  position: relative;
  height: 100%;
`

export const Header = styled.div`
  width: 100%;
  height: ${rem(26)};
  display: flex;
  justify-content: center;
  align-items: flex-end;
`

export const HeaderHandle = styled.div`
  width: ${rem(72)};
  height: ${rem(10)};
  background: #EDEDED;
  border-radius: ${rem(6)};
`

export const Title = styled.div`
  font-weight: 500;
  font-size: ${rem(34)};
  line-height: ${rem(48)};
  color: #2E2E2E;
  text-align: center;
  padding: 0 ${rem(32)};
  position: relative;
  margin-top: ${rem(25)};
  .link {
    font-weight: 500;
    font-size: ${rem(30)};
    line-height: ${rem(42)};
    color: #14C4BC;
    position: absolute;
    right: ${rem(32)};
    top: ${rem(3)};
    .icon {
      margin-right: ${rem(8)};
      width: ${rem(32)};
      height: ${rem(32)};
    }
  }
`

export const ListContainer = styled.div`
  &::before {
    content: '';
    display: block;
    width: 200%;
    height: 1px;
    background-color: #EDEDED;
    transform: scale(0.5);
    transform-origin: 0;
  }
  max-height: calc(100% - ${rem(126)});
  margin-top: ${rem(26)};
  overflow-y: scroll;
  padding-bottom: ${rem(208)};
`


export const ListItem = styled.div<{
  checked: boolean;
  disabled: boolean;
}>`
  height: ${rem(120)};
  padding: ${rem(30)} ${rem(32)};
  display: flex;
  align-items: center;
  .cover {
    width: ${rem(60)};
    height: ${rem(60)};
    background: #F5F5F5;
    margin-right: ${rem(16)};
    border-radius: ${rem(8)};
  }
  .info {
    width: ${rem(533)};
    display: flex;
    align-items: center;
    margin-right: ${rem(37)};
    .title {
      max-width: calc(100% - ${rem(84)});
      font-size: ${rem(34)};
      line-height: ${rem(48)};
      color: #2E2E2E;
      margin-right: ${rem(12)};

      display: -webkit-box;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
    }
    .label {
      padding: ${rem(2)} ${rem(6)};
      border: 1px solid #B3B3B3;
      border-radius: ${rem(8)};
      font-size: ${rem(20)};
      line-height: ${rem(28)};
      color: #8F8F8F;
      word-break: keep-all;
    }
  }
  .radio {
    width: ${rem(40)};
    height: ${rem(40)};
    border-radius: 50%;
    ${props => props.checked
      ? `
        background-color: #14C4BC;
        background: url('https://lofter.lf127.net/1637134280417/Light.png') no-repeat;
        background-size: cover;
      `
      : `
        border: 1px solid #EDEDED;
      `
    }
    ${props => props.disabled ? `
      background: #F5F5F5;
    ` : ''}
  }
`

export const FixedButton = styled.div<{
  disabled: boolean;
}>`
  position: absolute;
  bottom: 0;
  box-sizing:border-box;
  padding-top: ${rem(20)};
  padding-bottom: calc(${rem(20)} + constant(safe-area-inset-bottom));
  padding-bottom: calc(${rem(20)} + env(safe-area-inset-bottom));
  width: 100%;
  background: #ffffff;
  .button {
    width: ${rem(686)};
    height: ${rem(100)};
    margin: 0 auto;
    border-radius: ${rem(60)};
    background: ${props => props.disabled ? '#F5F5F5' : '#14C4BC'};
    color: ${props => props.disabled ? ' #CCCCCC' : '#ffffff'};
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    font-size: ${rem(34)};
    line-height: ${rem(48)};
    ${props => props.disabled
      ? ''
      : `
        &:active {
          opacity: 0.7;
        }
      `
    }
  }
`