from branca.element import Template, MacroElement


def get_legend_macro(show_unverified):
    labels_unverified_requests = _(
        """
      <li><span style='background:#CE3C28;opacity:0.7;'></span>Rescue</li>
      <li><span style='background:#ED922E;opacity:0.7;'></span>Medical Assistance</li>
      <li><span style='background:#FFCA92;opacity:0.7;'></span>Shelter</li>
      <li><span style='background:#37A8DA;opacity:0.7;'></span>Food & Water</li>
      <li><span style='background:#575757;opacity:0.7;'></span>Dangers</li>
      <li><span style='background:#6EAA25;opacity:0.7;'></span>Done</li>
      <li><span style='background:#023020;opacity:0.7;'></span>Partial</li>
      <li><span style='background:#FF91E8;opacity:0.7;'></span>Planned</li>
  """
    )
    labels_verified = _(
        """
      <li><span style='background:#CE3C28;opacity:0.7;'></span>High Emergency</li>
      <li><span style='background:#ED922E;opacity:0.7;'></span>Medium Emergency</li>
      <li><span style='background:#FFCA92;opacity:0.7;'></span>Low Emergency</li>
      <li><span style='background:#6EAA25;opacity:0.7;'></span>Done</li>
      <li><span style='background:#023020;opacity:0.7;'></span>Partial</li>
      <li><span style='background:#FF91E8;opacity:0.7;'></span>Planned</li>
  """
    )

    template_1 = """
  {% macro html(this, kwargs) %}

  <!doctype html>
  <html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Draggable - Default functionality</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    
    <script>
    $( function() {
      $( "#maplegend" ).draggable({
                      start: function (event, ui) {
                          $(this).css({
                              right: "auto",
                              top: "auto",
                              bottom: "auto"
                          });
                      }
                  });
  });

    </script>
  </head>
  <body>

  
  <div id='maplegend' class='maplegend' 
      style='position: absolute; z-index:9999; border:2px solid grey; background-color:rgba(255, 255, 255, 0.8);
      border-radius:6px; padding: 10px; font-size:14px; right: 20px; bottom: 20px;'>
      
  <div class='legend-title'>Legend / مفتاح الخريطة</div>
  <div class='legend-scale'>
    <ul class='legend-labels'>

  """
    template_2 = """
    </ul>
  </div>
  </div>
  
  </body>
  </html>

  <style type='text/css'>
    .maplegend .legend-title {
      text-align: left;
      margin-bottom: 5px;
      font-weight: bold;
      font-size: 90%;
      color: #333;
      }
    .maplegend .legend-scale ul {
      margin: 0;
      margin-bottom: 5px;
      padding: 0;
      float: left;
      list-style: none;
      }
    .maplegend .legend-scale ul li {
      font-size: 80%;
      list-style: none;
      margin-left: 0;
      line-height: 18px;
      margin-bottom: 2px;
      color: #111;
      }
    .maplegend ul.legend-labels li span {
      display: block;
      float: left;
      height: 16px;
      width: 30px;
      margin-right: 5px;
      margin-left: 0;
      border: 1px solid #999;
      }
    .maplegend .legend-source {
      font-size: 80%;
      color: #777;
      clear: both;
      }
    .maplegend a {
      color: #777;
      }

    .leaflet-control-geocoder-form input {
    color: black;
      }
    
  </style>
  {% endmacro %}"""

    legend_macro = MacroElement()
    legend_macro._template = Template(
        template_1 + (labels_unverified_requests if show_unverified else labels_verified) + template_2
    )
    return legend_macro


__all__ = ["get_legend_macro"]