/*
 * Copyright 2020 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/**
 * Internal dependencies
 */
import { PAGE_HEIGHT, PAGE_WIDTH } from '../../../constants';

const SAFE_ZONE_AREA = PAGE_HEIGHT * PAGE_WIDTH;

const MIN_PIXEL_DENSITY = 2;

const MAX_VIDEO_LENGTH_SECONDS = 60;
const MAX_VIDEO_WIDTH = 3840;
const MAX_VIDEO_HEIGHT = 2160;
const MIN_VIDEO_HEIGHT = 480;
const MIN_VIDEO_WIDTH = 852;

// todo: get video frames per second
// MIN_VIDEO_FPS = 24;
// export function videoElementFps(element) {}

const getChecklistMessage = (elementId, message) => ({
  type: 'guidance',
  elementId,
  message,
});

export function mediaElementSizeOnPage(element) {
  // triggered if only one video is on the page and it takes less than 50% of the safe zone area
  // encourage users to consider a more immersive media sizing and cropping.
  const elementArea = element.height * element.width;
  const isTooSmallOnPage = SAFE_ZONE_AREA / 2 > elementArea;

  if (isTooSmallOnPage) {
    const media = element.type === 'video' ? 'Video' : 'Image';
    return getChecklistMessage(element.id, `${media} is too small on the page`);
  }

  return undefined;
}

export function videoElementSizeOnPage(page) {
  const videoElementsOnPage = page.elements.filter(
    ({ type }) => type === 'video'
  );
  if (videoElementsOnPage.length === 1) {
    const [videoElement] = videoElementsOnPage;
    return mediaElementSizeOnPage(videoElement);
  }
  return undefined;
}

export function mediaElementResolution(element) {
  if (element.type === 'video') {
    return videoElementResolution(element);
  }

  if (element.type === 'image' || element.type === 'gif') {
    return imageElementResolution(element);
  }

  return undefined;
}

function videoElementResolution(element) {
  const videoResolutionLow =
    element.resource.full.height <= MIN_VIDEO_HEIGHT &&
    element.resource.full.width <= MIN_VIDEO_WIDTH;
  const videoResolutionHigh =
    element.resource.full.height >= MAX_VIDEO_HEIGHT &&
    element.resource.full.width >= MAX_VIDEO_WIDTH;

  if (videoResolutionHigh) {
    return getChecklistMessage(
      element.id,
      "Video's resolution is too high to display on most mobile devices (>4k)"
    );
  }

  if (videoResolutionLow) {
    return getChecklistMessage(element.id, 'Video has low resolution');
  }

  return undefined;
}

function imageElementResolution(element) {
  const resourceDims = element.resource.height * element.resource.width;
  const elementDims = element.height * element.width;
  const minDensity = resourceDims / MIN_PIXEL_DENSITY;
  if (elementDims > minDensity) {
    return getChecklistMessage(element.id, 'Image has low resolution');
  }
  return undefined;
}

export function videoElementLength(element) {
  if (element.resource.length > MAX_VIDEO_LENGTH_SECONDS) {
    return getChecklistMessage(
      element.id,
      'Video is longer than 1 minute (suggest breaking video up into multiple segments)'
    );
  }
  return undefined;
}

@@ -589,16 +589,89 @@
 e.%0A */%0A%0A
+/**%0A * WordPress dependencies%0A */%0Aimport %7B __ %7D from '@wordpress/i18n';%0A%0A
 /**%0A * I
@@ -1108,112 +1108,8 @@
 %7B%7D%0A%0A
-const getChecklistMessage = (elementId, message) =%3E (%7B%0A  type: 'guidance',%0A  elementId,%0A  message,%0A%7D);%0A%0A
 expo
@@ -1478,120 +1478,203 @@
     
-const media = element.type === 'video' ? 'Video' : 'Image';%0A    return getChecklistMessage(element.id, %60$%7Bmedia%7D
+return %7B%0A      type: 'guidance',%0A      elementId: element.id,%0A      message:%0A        element.type === 'video'%0A          ? __(%60Video is too small on the page%60, 'web-stories')%0A          : __(%60Image
  is 
@@ -1695,17 +1695,39 @@
 he page%60
-)
+, 'web-stories'),%0A    %7D
 ;%0A  %7D%0A%0A 
@@ -2681,47 +2681,84 @@
 urn 
-getChecklistMessage(%0A      element.id,%0A
+%7B%0A      type: 'guidance',%0A      elementId: element.id,%0A      message: __(%0A  
     
@@ -2831,22 +2831,54 @@
 s (%3E4k)%22
+,
 %0A    
-)
+    'web-stories'%0A      ),%0A    %7D
 ;%0A  %7D%0A%0A 
@@ -2919,40 +2919,81 @@
 urn 
-getChecklistMessage(element.id, 
+%7B%0A      type: 'guidance',%0A      elementId: element.id,%0A      message: __(
 'Vid
@@ -3010,25 +3010,47 @@
  resolution'
-)
+, 'web-stories'),%0A    %7D
 ;%0A  %7D%0A%0A  ret
@@ -3341,40 +3341,81 @@
 urn 
-getChecklistMessage(element.id, 
+%7B%0A      type: 'guidance',%0A      elementId: element.id,%0A      message: __(
 'Ima
@@ -3436,17 +3436,39 @@
 olution'
-)
+, 'web-stories'),%0A    %7D
 ;%0A  %7D%0A  
@@ -3609,47 +3609,84 @@
 urn 
-getChecklistMessage(%0A      element.id,%0A
+%7B%0A      type: 'guidance',%0A      elementId: element.id,%0A      message: __(%0A  
     
@@ -3773,14 +3773,46 @@
 ts)'
+,
 %0A    
-)
+    'web-stories'%0A      ),%0A    %7D
 ;%0A  

add translation