// Copyright (c) 2014, 2026, Oracle and/or its affiliates.  Licensed under The Universal Permissive License (UPL), Version 1.0 as shown at https://oss.oracle.com/licenses/upl/

@import "../../utilities/oj.utilities";

//-------------------------------------------------------------------------------------------------
// Optional delegate called from oj-popup-tail-url. This override creates a popup tail with a shadow 
// using a SVG data URL. The point $x1,$y1 and $x3,$y3 must align to the popup.
//-------------------------------------------------------------------------------------------------
@function oj-popup-tail-url-delegate($edge, $width, $height, $borderColor, $borderWidth, $fillColor, $x1, $y1, $x2, $y2, $x3, $y3) {
  $cornerEdges: ('left-top': 45, 'left-bottom': -45, 'right-top': 135, 'right-bottom': -135);
  @if map-has-key($cornerEdges, $edge) {
    $rotatePct: map-get($cornerEdges, $edge);
    @return oj-svg-url(
      "<svg xmlns='http://www.w3.org/2000/svg' width='40px' height='40px'><defs><filter id='f1' x='0' y='0'><feGaussianBlur in='SourceGraphic' stdDeviation='1'/></filter></defs><g transform='rotate(#{$rotatePct}, 20, 20) translate(-8)'><g style='stroke-width:1;fill-rule:evenodd;'><polygon points='40,0 0,20 40,40 0,20' style='fill:#{$overlayBgColor};stroke:#{$overlayBgColor};stroke-opacity:.2' filter='url(#f1)' transform='translate(-1)'/><polygon points='40,0 0,20 40,40 24,20' style='fill:#{$fillColor};stroke:#{$fillColor};'/></g><g style='stroke:#{$borderColor};stroke-width:#{$borderWidth};'><line x1='40' y1='0' x2='0' y2='20'/><line x1='40' y1='40' x2='0' y2='20'/></g></g></svg>");
  } @else {
    $sideEdges: (
      'left-middle':('width':21px, 'height':44px, 'x1':21, 'y1':44, 'x2':1, 'y2':22, 'x3':21, 'y3':0),
      'right-middle':('width':21px, 'height':44px, 'x1':0, 'y1':44, 'x2':20, 'y2':22, 'x3':0, 'y3':0),
      'center-top':('width':44px, 'height':21px, 'x1':0, 'y1':21, 'x2':22, 'y2':1, 'x3':44, 'y3':21),
      'center-bottom':('width':44px, 'height':21px, 'x1':0, 'y1':0, 'x2':22, 'y2':20, 'x3':44, 'y3':0)
      );  

    $edgeInfo: map-get($sideEdges, $edge);
    $width: map-get($edgeInfo, 'width');
    $height: map-get($edgeInfo, 'height');
    $x1: map-get($edgeInfo, 'x1');
    $y1: map-get($edgeInfo, 'y1');
    $x2: map-get($edgeInfo, 'x2');
    $y2: map-get($edgeInfo, 'y2');  
    $x3: map-get($edgeInfo, 'x3');
    $y3: map-get($edgeInfo, 'y3'); 
    
    @return oj-svg-url(
      "<svg xmlns='http://www.w3.org/2000/svg' width='#{$width}' height='#{$height}'><defs><filter id='f1' x='0' y='0'><feGaussianBlur in='SourceGraphic' stdDeviation='1.25'/></filter></defs><g style='stroke:#{$fillColor};stroke-width:1;fill-rule:evenodd;'><polygon points='#{$x1},#{$y1} #{$x2},#{$y2} #{$x3},#{$y3}' style='fill:#{$overlayBgColor};' filter='url(#f1)'/><polygon points='#{$x1},#{$y1} #{$x2},#{$y2} #{$x3},#{$y3}' style='fill:#{$fillColor}'/></g><g style='stroke:#{$borderColor};stroke-width:#{$borderWidth};'><line x1='#{$x1}' y1='#{$y1}' x2='#{$x2}' y2='#{$y2}'/><line x1='#{$x3}' y1='#{$y3}' x2='#{$x2}' y2='#{$y2}'/></g></svg>");
  }
}

// ----- start dependencies ---------

// set up include variables before importing dependencies
@if $includePopupClasses != false {
  $includeIconClasses: true !global;
  $includeComponentClasses: true !global;
  $includeAnimationClasses: true !global;
}

// import dependencies
@import "../../common/helpers/oj.common.helpers";
@import "oj.alta.android.icons";
@import "oj.alta.android.component"; // overlay class in this file

// import classes defined in the common directory
@import "../../common/widgets/oj.common.popup"; 

// ----- end dependencies ---------

@if $includePopupClasses != false {
  @include module-include-once("alta.android.popup") {
    // try account for the wide tail and rounded corners with the min width and
    // height so the popup is not smaller than the tail.
    .oj-popup {
      min-width: 48px;
      min-height: 48px;
    }
    .oj-popup-tail.oj-popup-tail-simple.oj-left.oj-top {
      width: 40px;
      height: 40px;
      left: -14px;
      top: -14px;
    }  
    .oj-popup-tail.oj-popup-tail-simple.oj-left.oj-bottom {
      width: 40px;
      height: 40px;
      left: -14px;
      bottom: -14px;
    }
    .oj-popup-tail.oj-popup-tail-simple.oj-right.oj-top {
      width: 40px;
      height: 40px;
      right: -14px;
      top: -14px;
    }
    .oj-popup-tail.oj-popup-tail-simple.oj-right.oj-bottom {
      width: 40px;
      height: 40px;
      right: -14px;
      bottom: -14px;
    }
    .oj-popup-tail.oj-popup-tail-simple.oj-left.oj-middle {
      width: 21px;
      height: 44px;
      left: -21px;
    }
    .oj-popup-tail.oj-popup-tail-simple.oj-right.oj-middle {
      width: 21px;
      height: 44px;
      right: -21px;
    }
    .oj-popup-tail.oj-popup-tail-simple.oj-center.oj-top {
      width: 44px;
      height: 21px;
      top: -21px;
    }
    .oj-popup-tail.oj-popup-tail-simple.oj-center.oj-bottom {
      width: 44px;
      height: 21px;
      bottom: -21px;
    }
  }
}