import React from 'react'
import LogoVector from 'atoms/Icons/LogoIcon'
import { Button } from 'atoms/Button'
import PlayButtonIcon from 'icons/PlayIcon'

const VideoPresetWrapper = styled.div `
  @container();
  position: relative;
  height: rem(680);
  display: flex;
  margin: $spacing auto $spacing-small;

  /* @todo we have @desktop-or-smaller() ? */
  @media (max-width: 1200px) {
    margin-left: $spacing-small;
    margin-right: $spacing-small;
  }
  @tablet-or-smaller() {
    height: rem(425);
  }
  @phone-or-smaller() {
    height: rem(175);
    margin: 0 $spacing-extra-small $spacing-extra-small;
  }

  video {
    object-fit: fill;
    width: 100%;

    ${props =>
    !props.isPlaying &&
      styled.css `
        &::-webkit-media-controls-panel {
          display: none;
        }
      `};
  }
`

const VideoWidgetLogo = styled.div.attrs({
  children: <LogoVector />,
}) `
  display: flex;
  margin-bottom: $spacing-small;

  svg {
    * {
      fill: white;
    }
    &.header-logo-svg {
      path {
        fill: $colors-main-background;
      }
      @tablet-or-smaller() {
        width: rem(70);
        height: rem(40);
      }
      @phone-or-smaller() {
        width: rem(40);
        height: rem(22);
      }
    }
  }
`

const VideoTitle = styled.header `
  color: $colors-main-background;
  margin-bottom: rem(2);

  bottom: $spacing3x;
  @font (24,semi);
  @phone-or-smaller() {
    @font (14,semi);
    bottom: $spacing-small;
  }
`

const VideoSlogan = styled.p `
  @font (16,semi);
  color: $colors-main-background;
  margin: 0;

  @phone-or-smaller() {
    display: none;
  }
`

const VideoLogoPanel = styled.section `
  position: absolute;
  left: $spacing3x;
  bottom: rem(24);

  @tablet-or-smaller() {
    left: $spacing-small;
  }
`

const VideoShareWrap = styled.div `
  color: $colors-main-background;
  display: flex;
  align-items: center;
  position: absolute;

  right: $spacing2x;
  @tablet-or-smaller() {
    right: $spacing-small;
  }

  top: $spacing;
  @font (24,semi);
  @phone-or-smaller() {
    @font (16,semi);
    top: $spacing-small;
  }
`

const VideoShareText = styled.p `
  margin: 0 $spacing-small;
`

// figcaption?
const VideoTimerWrap = styled.p `
  position: absolute;
  right: $spacing3x;
  bottom: rem(24);
  display: flex;
  align-items: center;
  color: $colors-main-background;
  margin: 0;

  @font (16,semi);
  @tablet-or-smaller() {
    right: $spacing-small;
  }
  @phone-or-smaller() {
    @font (14,semi);
    bottom: $spacing-small;
  }

  .video-play-icon {
    display: flex;
    align-items: center;
    svg {
      width: $spacing-big;
      height: $spacing-big;
      position: relative;
      margin: 0 $spacing-small;
    }
    @phone-or-smaller() {
      display: none;
    }
  }
`

// adm:Text
const VideoTimerText = styled.span `
  margin-left: $spacing-small;
`

// @todo animate play to pause
const PlayButton = styled.withComponent(Button) `
  background: transparent;
  border: none;

  /* @todo @fixme @invalid */
  pointer-events: none;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(2, 2);

  svg {
    stroke-width: 1px;
    stroke-color: black;
    fill: white;
  }
`

export {
  VideoPresetWrapper,
  VideoTitle,
  VideoSlogan,
  VideoShareText,
  VideoShareWrap,
  VideoWidgetLogo,
  VideoTimerWrap,
  VideoTimerText,
  PlayButton,
  VideoLogoPanel,
}