""" Produces plots and a summary html 'headless' """
import logging
import os

import matplotlib
import matplotlib.pyplot as ppl
import spyboat.plotting as spyplot

ppl.switch_backend('Agg')
matplotlib.rcParams["text.usetex"] = False
logger = logging.getLogger(__name__)

# figure resolution
DPI = 250


def produce_snapshots(input_movie, results, frame, Wkwargs, img_path="."):
    """
    Takes the *input_movie* and the *results* dictionary
    from spyboat.processing.run_parallel and produces phase,
    period and amplitude snapshot png's.

    For the period snapshot also the period range is needed,
    hence the analysis dictionary 'Wkwargs' also gets passed.

    The output files name pattern is:
    [input, phase, period, amplitude]_frame{frame}.png
    and the storage location in *img_path*.

    These get picked up by 'create_html'
    """

    spyplot.input_snapshot(input_movie[frame])
    fig = ppl.gcf()
    out_path = os.path.join(img_path, f"input_frame{frame}.png")
    fig.savefig(out_path, dpi=DPI)
    ppl.close(fig)

    spyplot.phase_snapshot(results["phase"][frame])
    fig = ppl.gcf()
    out_path = os.path.join(img_path, f"phase_frame{frame}.png")
    fig.savefig(out_path, dpi=DPI)
    ppl.close(fig)

    spyplot.period_snapshot(
        results["period"][frame], Wkwargs["Tmin"],
        Wkwargs["Tmax"], time_unit="a.u."
    )

    fig = ppl.gcf()
    out_path = os.path.join(img_path, f"period_frame{frame}.png")
    fig.savefig(out_path, dpi=DPI)
    ppl.close(fig)

    spyplot.amplitude_snapshot(results["amplitude"][frame])
    fig = ppl.gcf()
    out_path = os.path.join(img_path, f"amplitude_frame{frame}.png")
    fig.savefig(out_path, dpi=DPI)
    ppl.close(fig)

    logger.info(f"Produced 4 snapshots for frame {frame}..")


def produce_distr_plots(results, Wkwargs, img_path="."):
    """
    Output file names are:

    period_distr.png, power_distr.png and phase_distr.png
    """

    spyplot.period_distr_dynamics(results["period"], Wkwargs)
    fig = ppl.gcf()
    out_path = os.path.join(img_path, "period_distr.png")
    fig.savefig(out_path, dpi=DPI)

    spyplot.power_distr_dynamics(results["power"], Wkwargs)
    fig = ppl.gcf()
    out_path = os.path.join(img_path, "power_distr.png")
    fig.savefig(out_path, dpi=DPI)

    spyplot.phase_coherence_dynamics(results["phase"], Wkwargs)
    fig = ppl.gcf()
    out_path = os.path.join(img_path, "phase_distr.png")
    fig.savefig(out_path, dpi=DPI)

    logger.info("Produced 3 distribution plots..")


def create_html(frame_nums, html_fname="OutputReport.html"):
    """
    The html generated assumes the respective png's
    have been created with 'produce_snapshots' and 'produce_distr_plots'
    and can be found at the cwd (that's how Galaxy works..)
    """

    # -- create a gallery for every frame in frame_nums --

    galleries = ""
    for frame_num in frame_nums:
        new_gal = f"""
        <div class="FrameSlides">
        <h3 style="text-align:center; color=#363333">
        Frame Nr. {frame_num} </h3>

            <div class="snapshot_gallery">

               <figure class=”snapshot_gallery__item
                   snapshot_gallery__item--1">
                 <img src="input_frame{frame_num}.png" alt="The Input"
                     class="snapshot_gallery__img">
               </figure>

               <figure class=”snapshot_gallery__item
                  snapshot_gallery__item--2">
                 <img src="phase_frame{frame_num}.png" alt="Phase"
                    class="snapshot_gallery__img">
               </figure>

               <figure class=”snapshot_gallery__item
                    snapshot_gallery__item--3">
                 <img src="period_frame{frame_num}.png"
                   alt="Period" class="snapshot_gallery__img">
               </figure>

               <figure class=”snapshot_gallery__item
                   snapshot_gallery__item--4">
                 <img src="amplitude_frame{frame_num}.png"
                   alt="Amplitude" class="snapshot_gallery__img">
               </figure>
            </div>
        </div>
        """
        galleries += new_gal

    html_string = f"""
    <html>
    <!-- this file got automatically created by 'output_report.py' -->
    <title>SpyBOAT Output Report</title>
    <head>
        <!-- that doesn't work with galaxy.. -->
        <!--link rel="stylesheet" href="styles.css"-->
      <style type="text/css">
        body{{ margin:10 100; background:whitesmoke; }}
        /*body{{ margin:10 100; background:darkslategrey; }}*/
        .center{{
            text-align: center;
            display: block;
            margin-left: auto;
            margin-right: auto;
            width: 100%;}}

        /* matplotlib output at 1600x1200  */
        .distr_gallery {{
            display: grid;
            margin: 0 auto;
            text-align: center;
            /* border: 1px dashed rgba(4, 4, 4, 0.35);     */
            grid-template-columns: repeat(3,1fr);
            grid-template-rows: 20vw;
            grid-gap: 0px;
            column-gap: 0px
        }}
        .distr_gallery__img {{
            width: 100%;
            height: 100%;
            object-fit: contain;
        }}


        /* matplotlib output at 1600x1200  */
        .snapshot_gallery {{
            display: grid;
            margin: 0 auto;
            border: 1px dashed rgba(4, 4, 4, 0.35);
            text-align: center;
            grid-template-columns: repeat(2,1fr);
            grid-template-rows: repeat(2,20vw);
            grid-gap: 5px;
        }}
        .snapshot_gallery__img {{
            width: 100%;
            height: 100%;
            object-fit: contain;
        }}
        .subheader{{
             text-align:center;
             font-size: 160%;
             color:#363333;}}
     </style>
    </head>
    <body>
    <h1 style="text-align:center; color:#363333">SpyBOAT Results Report</h1>
    <hr style="width:50%">
    <h1 class="subheader"> Distribution Dynamics </h1>
    <div class="distr_gallery">
       <figure class=”distr_gallery__item distr_gallery__item--1">
         <img src="period_distr.png" alt="Period" class="distr_gallery__img">
       </figure>

       <figure class=”distr_gallery__item distr_gallery__item--2">
         <img src="power_distr.png" alt="Power" class="distr_gallery__img">
       </figure>

       <figure class=”distr_gallery__item distr_gallery__item--3">
         <img src="phase_distr.png" alt="Phase" class="distr_gallery__img">
       </figure>

    </div>

    <h1 class="subheader"> Output Movie Snapshots </h1>

    <!-- trigger the javascript at the end--->
    <div class="center">
        <button class="w3-button" onclick="plusDivs(-1)">&#10094; Prev</button>
        <button class="w3-button" onclick="plusDivs(1)">Next &#10095;</button>
    </div>

    <!-- defines all elements of the "FrameSlides" class --->
    {galleries}
    </div>

    <!-- javascript with escaped '{{'--->
    <script>
        var slideIndex = 1;
        showDivs(slideIndex);

        function plusDivs(n) {{
          showDivs(slideIndex += n);
        }}

        function showDivs(n) {{
          var i;
          var x = document.getElementsByClassName("FrameSlides");
          if (n > x.length) {{slideIndex = 1}}
          if (n < 1) {{slideIndex = x.length}} ;
          for (i = 0; i < x.length; i++) {{
            x[i].style.display = "none";
          }}
          x[slideIndex-1].style.display = "block";
        }}
    </script>
    </body>
    </html>
    """

    with open(html_fname, "w") as OUT:
        OUT.write(html_string)

    logger.info("Created html report")
    return html_string

# for local testing
# create_html([0,20,40,60,80])