<template>
<svg example-act="pipeline-viz" width="1979px" height="292px" viewBox="0 0 1979 292" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="TopNavigation">
    <!-- Generator: Sketch 52.6 (67491) - http://www.bohemiancoding.com/sketch -->
    <title>TopNav</title>
    <defs>
      <filter id="censor" x="0" y="0">
        <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
      </filter>
    </defs>
    <desc>Created with Sketch.</desc>
    <g id="TopNav" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Background" transform="translate(469.000000, 102.000000)">
            <path d="M1051,68 L966,110" id="Line-3-Copy-4" stroke="#A9A9A9" stroke-width="13" stroke-linecap="square" transform="translate(1008.500000, 89.000000) rotate(90.000000) translate(-1008.500000, -89.000000) "></path>
            <path d="M1052.5,114.5 L961.5,69.5" id="Line-3-Copy-5" stroke="#A9A9A9" stroke-width="13" stroke-linecap="square" transform="translate(1007.000000, 92.000000) rotate(90.000000) translate(-1007.000000, -92.000000) "></path>
            <circle id="Oval-Copy-38" stroke="#A9A9A9" stroke-width="7" transform="translate(1008.000000, 33.000000) rotate(90.000000) translate(-1008.000000, -33.000000) " cx="1008" cy="33" r="29.5"></circle>
            <circle id="Oval-Copy-40" stroke="#A9A9A9" stroke-width="7" transform="translate(1008.000000, 147.000000) rotate(90.000000) translate(-1008.000000, -147.000000) " cx="1008" cy="147" r="29.5"></circle>
            <path d="M238,147 L961,147" id="Line-Copy-32" stroke="#A9A9A9" stroke-width="6" stroke-linecap="square"></path>
            <path d="M0,147 L141,147" id="Line-Copy-33" stroke="#A9A9A9" stroke-width="6" stroke-linecap="square"></path>
            <path d="M0,34 L141,34" id="Line-Copy-34" stroke="#A9A9A9" stroke-width="6" stroke-linecap="square"></path>
            <path d="M238,34 L403,34" id="Line-Copy-35" stroke="#A9A9A9" stroke-width="6" stroke-linecap="square"></path>
            <path d="M517,34 L682,34" id="Line-Copy-36" stroke="#A9A9A9" stroke-width="6" stroke-linecap="square"></path>
            <path d="M792,34 L957,34" id="Line-Copy-37" stroke="#A9A9A9" stroke-width="6" stroke-linecap="square"></path>
            <path d="M1037,104 L1025.5,89 L1037,73 L1068,88.5 L1037,104 Z" id="Combined-Shape-Copy" fill="#A9A9A9"></path>
        </g>
        <g id="Labels" transform="translate(-5.000000, 12.000000)" fill="#797979" font-weight="normal" font-size="36" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
            <text id="Insert-Copy" font-size="55">
                <tspan x="64.07" y="266">Insert</tspan>
            </text>
            <text id="Scaffold-Copy" font-size="55">
                <tspan x="11.93" y="153">Scaffold</tspan>
            </text>
            <text id="Grafted-Copy" font-size="55">
                <tspan x="1790" y="203">Grafted</tspan>
            </text>
            <foreignObject font-weight="normal" x="200" y="-20" width="300" height="200">
              <p xmlns="http://www.w3.org/1999/xhtml">{{getWorkflowStep("protein-selection").label}}</p>
            </foreignObject>
            <foreignObject font-weight="normal" x="510" y="-20" width="300" height="200">
              <p xmlns="http://www.w3.org/1999/xhtml">{{getWorkflowStep("loop-exploration").label}}</p>
            </foreignObject>
            <foreignObject font-weight="normal" x="785" y="-20" width="300" height="200">
              <p xmlns="http://www.w3.org/1999/xhtml">{{getWorkflowStep("flexibility-filter").label}}</p>
            </foreignObject>
            <foreignObject font-weight="normal" x="1070" y="-20" width="300" height="200">
              <p xmlns="http://www.w3.org/1999/xhtml">{{getWorkflowStep("crosscorelation-filter").label}}</p>
            </foreignObject>
            <foreignObject font-weight="normal" x="1400" y="-20" width="170" height="200">
              <p xmlns="http://www.w3.org/1999/xhtml">{{getWorkflowStep("loop-pairing").label}}</p>
            </foreignObject>
            <foreignObject font-weight="normal" x="1620" y="-20" width="200" height="200">
              <p xmlns="http://www.w3.org/1999/xhtml">{{getWorkflowStep("grafting").label}}</p>
            </foreignObject>
            <!-- <text id="Boundaries-Definitio-Copy" font-size="32">
                <tspan x="378.144" y="33">{{getWorkflowStep("protein-selection").label.split(' ')[0]}}</tspan>
                <tspan x="390.656" y="75">{{getWorkflowStep("protein-selection").label.split(' ')[1]}}</tspan>
            </text> -->
<!--             <text id="Boundaries-Definitio-Copy" font-size="32">
                <tspan x="578.144" y="33">Boundaries </tspan>
                <tspan x="590.656" y="75">Definition</tspan>
            </text>
            <text id="Flexibility-Assessme-Copy" font-size="32">
                <tspan x="864.768" y="33">Flexibility </tspan>
                <tspan x="846.528" y="75">Assessment</tspan>
            </text>
            <text id="Cross-correlation-As-Copy" font-size="32">
                <tspan x="1083.52" y="33">Cross-correlation </tspan>
                <tspan x="1120.528" y="75">Assessment</tspan>
            </text>
            <text id="Grafting-and-Evaluat-Copy" font-size="32">
                <tspan x="1393.504" y="33">Grafting and </tspan>
                <tspan x="1406.752" y="75">Evaluation</tspan>
            </text> -->
        </g>
        <g id="Grafted_glyph" transform="translate(1551.000000, 155.000000)">
            <rect class="insert" :class='{active: getScaffoldGrafting && getInsertGrafting}' id="grafted_back" stroke="#979797" fill="#179BAC" x="0.5" y="0.5" width="213" height="69" rx="8"></rect>
            <polygon class="scaffold" :class='{active: getScaffoldGrafting && getInsertGrafting}' id="grafted_front1" fill="#AC2817" points="30 3.55271368e-14 52 3.55271368e-14 52 69 30 69"></polygon>
            <polygon class="scaffold" :class='{active: getScaffoldGrafting && getInsertGrafting}' id="grafted_front2" fill="#AC2817" points="80 3.55271368e-14 113.789537 3.55271368e-14 113.789537 69 80 69"></polygon>
            <polygon class="scaffold" :class='{active: getScaffoldGrafting && getInsertGrafting}' id="grafted_front3" points="165.867481 3.55271368e-14 178.789537 3.55271368e-14 178.789537 69 165.867481 69"></polygon>
        </g>
        <rect id="top_insert_back" stroke="#979797" class="insert" :class='{active: getInsert != null}' x="235.5" y="214.5" width="213" height="69" rx="8"></rect>
        <rect id="top_scaffold_back" stroke="#979797" class="scaffold" :class='{active: getScaffold != null}' x="235.5" y="108.5" width="213" height="69" rx="8"></rect>
        <text id="top_scaffold_name" fill="#FFFFFF" fill-rule="nonzero" font-size="51" font-weight="500">
            <tspan v-if='getScaffold != null' x="253.1735" y="167">{{getScaffold.representation}}</tspan>
        </text>
        <text id="top_insert_name" fill="#FFFFFF" fill-rule="nonzero" font-size="51" font-weight="500">
          <!-- filter="url(#censor)"  -->
            <tspan v-if='getInsert != null' x="254.698" y="273">{{getInsert.representation}}</tspan>
        </text>
        <circle id="top_insert_boundaries" class="insert circle" :class='{active: getInsertBounderies}' stroke-width="16" cx="655" cy="249" r="20"></circle>
        <circle id="top_insert_grafting" class="insert circle" :class='{active: getScaffoldGrafting}' stroke-width="16" cx="1477" cy="249" r="20"></circle>
        <circle id="top_scaffold_boundaries" class="scaffold circle" :class='{active: getScaffoldBounderies}' stroke-width="16" cx="655" cy="136" r="20"></circle>
        <circle id="top_scaffold_flexibility" class="scaffold circle" :class='{active: getScaffoldFlexibility}' stroke-width="16" cx="929" cy="136" r="20"></circle>
        <circle id="top_scaffold_cross-correlation" class="scaffold circle" :class='{active: getScaffoldCorrelation}' stroke-width="16" cx="1203" cy="136" r="20"></circle>
        <circle id="top_scaffold_grafting" class="scaffold circle" :class='{active: getScaffoldGrafting}' stroke-width="16" cx="1477" cy="136" r="20"></circle>
    </g>
</svg>
</template>

<script>
import { mapGetters } from "vuex";
import _ from "lodash";

export default {
  name: 'TopNavigation',
  computed: {
    ...mapGetters(["getScaffold", "getInsert", "getAllLoops", "getWorkflowStep", "getWantedLoops"]),

    // getGraftedGlyphColor(){
    //   return this.getScaffold != null ? '#AC2817' : 'grey'
    // }
    getInsertBounderies(){
      return (this.getInsert?.computedLoops?.length > 0)
    },
    getInsertGrafting(){
      return (this.getInsert?.computedLoops?.length > 0) //FIX THIS
    },
    getScaffoldBounderies(){
      return (this.getScaffold?.computedLoops?.length > 0)
    },
    getScaffoldFlexibility(){
      return (this.getScaffold?.availableBfactors?.length > 0)
    },
    getScaffoldCorrelation(){
      return (this.getScaffold?.availableCcors?.length > 0)
    },
    getScaffoldGrafting(){
      return this.getWantedLoops.length > 0 && _.every(this.getWantedLoops, (l => l.replacement != null));
    },
  },
}
</script>

<style lang="css" scoped>
  
  .TopNavigation{
    height: 120px;
  }

  .scaffold, .insert{
    fill: var(--cancel-grey);
    stroke: var(--cancel-grey);
  }

  .scaffold.active{
    fill: var(--scaffold);
  }

  .active.insert{
    fill: var(--insert);
  }

  .circle.active.insert{
    stroke: var(--insert);
  }

  .circle.active.scaffold{
    stroke: var(--scaffold);
  }

  p {
    color: var(--cancel-grey);
    text-align: center;
    margin: 5px;
  }



/*:stroke='getScaffoldBounderiesColor'*/
</style>