import { defineComponent, PropType, ref } from 'vue'
import { ToggleOpen } from '@/types'
// import './Launcher.scss'

interface LauncherApp {
  name: string;
  img: JSX.Element;
}

type LauncherApps = Array<LauncherApp>

export const Launcher = defineComponent({
  props: {
    open: {
      type: Boolean,
      required: true,
    },
    toggleOpen: {
      type: Function as PropType<ToggleOpen>,
      required: true,
    },
  },
  setup: props => {
    return () => (
      <div
        class="application-launcher"
        onClick={() => props.toggleOpen('launcher')}
      >
        <img
          class="application-launcher-icon"
          alt="application-launcher"
          src="https://www.iconfinder.com/data/icons/faticons/32/grid-2-01-512.png"
        />
        {props.open && (
          <div class="launcher-dropdown">
            <div class="dropdown-item" onClick={() => window.open('https://producer.tagboard.com', '_blank')}>
              <div class="launcher-dropdown-icon">
                <svg width="25px" height="25px" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
                  <title>logo-producer</title>
                    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                      <g id="logo-producer" fill-rule="nonzero">
                        <polygon id="Rectangle" fill="#00C4DD" points="0 0 200 0 200 150 150 200 0 200"></polygon>
                        <path d="M64.9,135.1 C65.2333333,135.1 65.5166667,134.983333 65.75,134.75 C65.9833333,134.516667 66.1,134.233333 66.1,133.9 L66.1,133.9 L66.1,108.4 C66.1,108.066667 66.2666667,107.9 66.6,107.9 L66.6,107.9 L80.8,107.9 C85.2666667,107.9 89.2166667,107.016667 92.65,105.25 C96.0833333,103.483333 98.75,101 100.65,97.8 C102.55,94.6 103.5,90.9 103.5,86.7 C103.5,82.4333333 102.583333,78.65 100.75,75.35 C98.9166667,72.05 96.3333333,69.5 93,67.7 C89.6666667,65.9 85.8,65 81.4,65 L81.4,65 L53.2,65 C52.8666667,65 52.5833333,65.1166667 52.35,65.35 C52.1166667,65.5833333 52,65.8666667 52,66.2 L52,66.2 L52,133.9 C52,134.233333 52.1166667,134.516667 52.35,134.75 C52.5833333,134.983333 52.8666667,135.1 53.2,135.1 L53.2,135.1 L64.9,135.1 Z M79.3,96.6 L66.6,96.6 C66.2666667,96.6 66.1,96.4333333 66.1,96.1 L66.1,96.1 L66.1,77.7 C66.1,77.3666667 66.2666667,77.2 66.6,77.2 L66.6,77.2 L79.3,77.2 C82.3666667,77.2 84.8333333,78.1 86.7,79.9 C88.5666667,81.7 89.5,84.0666667 89.5,87 C89.5,89.8666667 88.5666667,92.1833333 86.7,93.95 C84.8333333,95.7166667 82.3666667,96.6 79.3,96.6 L79.3,96.6 Z M128.2,135.1 C128.533333,135.1 128.816667,134.983333 129.05,134.75 C129.283333,134.516667 129.4,134.233333 129.4,133.9 L129.4,133.9 L129.4,106.6 C129.4,104 130.233333,101.916667 131.9,100.35 C133.566667,98.7833333 135.6,97.9 138,97.7 C138.933333,97.5666667 139.666667,97.5 140.2,97.5 C141.533333,97.5 142.7,97.6666667 143.7,98 C144.566667,98.3333333 145.033333,98.1 145.1,97.3 L145.1,97.3 L147.2,85.9 C147.333333,85.1666667 147.133333,84.6666667 146.6,84.4 C145.2,83.4666667 143.3,83 140.9,83 C136.3,83 132.633333,85 129.9,89 C129.833333,89.1333333 129.733333,89.1666667 129.6,89.1 C129.466667,89.0333333 129.4,88.9 129.4,88.7 L129.4,88.7 L129.4,84.9 C129.4,84.5666667 129.283333,84.2833333 129.05,84.05 C128.816667,83.8166667 128.533333,83.7 128.2,83.7 L128.2,83.7 L116.5,83.7 C116.166667,83.7 115.883333,83.8166667 115.65,84.05 C115.416667,84.2833333 115.3,84.5666667 115.3,84.9 L115.3,84.9 L115.3,133.9 C115.3,134.233333 115.416667,134.516667 115.65,134.75 C115.883333,134.983333 116.166667,135.1 116.5,135.1 L116.5,135.1 L128.2,135.1 Z" id="Pr" fill="#00272C"></path>
                      </g>
                    </g>
                </svg>
              </div>
              Producer
            </div>
            <div class="dropdown-item" onClick={() => window.open('https://composer.tagboard.com', '_blank')}>
              <div class="launcher-dropdown-icon">
                <svg width="25px" height="25px" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
                  <title>logo-composer</title>
                  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g id="logo-composer" fill-rule="nonzero">
                      <polygon id="Rectangle" fill="#00C4DD" points="0 0 200 0 200 150 150 200 0 200"></polygon>
                      <path d="M70,135.6 C75.1333333,135.6 79.65,134.633333 83.55,132.7 C87.45,130.766667 90.4833333,128.033333 92.65,124.5 C94.8166667,120.966667 95.9,116.9 95.9,112.3 C95.9,112.033333 95.7833333,111.8 95.55,111.6 C95.3166667,111.4 95.0333333,111.3 94.7,111.3 L94.7,111.3 L83,110.8 C82.2,110.8 81.8,111.166667 81.8,111.9 C81.8,115.366667 80.7166667,118.166667 78.55,120.3 C76.3833333,122.433333 73.5333333,123.5 70,123.5 C66.4,123.5 63.5166667,122.433333 61.35,120.3 C59.1833333,118.166667 58.1,115.366667 58.1,111.9 L58.1,111.9 L58.1,87.8 C58.1,84.2666667 59.1833333,81.4333333 61.35,79.3 C63.5166667,77.1666667 66.4,76.1 70,76.1 C73.5333333,76.1 76.3833333,77.1666667 78.55,79.3 C80.7166667,81.4333333 81.8,84.2666667 81.8,87.8 C81.8,88.5333333 82.1333333,88.9 82.8,88.9 L82.8,88.9 L83,88.9 L94.7,88.2 C95.5,88.0666667 95.9,87.7 95.9,87.1 C95.9,82.5 94.8166667,78.45 92.65,74.95 C90.4833333,71.45 87.45,68.75 83.55,66.85 C79.65,64.95 75.1333333,64 70,64 C64.8,64 60.2333333,65 56.3,67 C52.3666667,69 49.3333333,71.8333333 47.2,75.5 C45.0666667,79.1666667 44,83.4 44,88.2 L44,88.2 L44,111.3 C44,116.1 45.0666667,120.333333 47.2,124 C49.3333333,127.666667 52.3666667,130.516667 56.3,132.55 C60.2333333,134.583333 64.8,135.6 70,135.6 Z M131.9,135.6 C137.5,135.6 142.283333,134.116667 146.25,131.15 C150.216667,128.183333 152.933333,124.1 154.4,118.9 C155.333333,115.766667 155.8,112.4 155.8,108.8 C155.8,105.133333 155.266667,101.633333 154.2,98.3 C152.6,93.3666667 149.866667,89.5166667 146,86.75 C142.133333,83.9833333 137.466667,82.6 132,82.6 C126.4,82.6 121.6,84 117.6,86.8 C113.6,89.6 110.833333,93.4666667 109.3,98.4 C108.366667,101.533333 107.9,105.066667 107.9,109 C107.9,112.666667 108.366667,116.066667 109.3,119.2 C110.766667,124.266667 113.5,128.266667 117.5,131.2 C121.5,134.133333 126.3,135.6 131.9,135.6 Z M131.9,123.5 C129.633333,123.5 127.716667,122.833333 126.15,121.5 C124.583333,120.166667 123.466667,118.333333 122.8,116 C122.333333,114.333333 122.1,112 122.1,109 C122.1,105.866667 122.366667,103.5 122.9,101.9 C123.566667,99.6333333 124.65,97.8666667 126.15,96.6 C127.65,95.3333333 129.533333,94.7 131.8,94.7 C134,94.7 135.866667,95.3333333 137.4,96.6 C138.933333,97.8666667 140.066667,99.6333333 140.8,101.9 C141.333333,103.833333 141.6,106.2 141.6,109 C141.6,111.533333 141.333333,113.866667 140.8,116 C140.133333,118.333333 139.033333,120.166667 137.5,121.5 C135.966667,122.833333 134.1,123.5 131.9,123.5 Z" id="Co" fill="#00272C"></path>
                    </g>
                  </g>
                </svg>
              </div>
              Composer
            </div>
            <div class="dropdown-item" onClick={() => window.open('https://account.tagboard.com/dashboard', '_blank')}>
              <div class="launcher-dropdown-icon">
                <svg width="25px" height="25px" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
                  <title>logo-builders</title>
                  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g id="logo-builders" fill-rule="nonzero">
                      <polygon id="Rectangle" fill="#00C4DD" points="0 0 200 0 200 150 150 200 0 200"></polygon>
                      <path d="M116.666667,99.9916667 C116.666667,90.8125 109.179167,83.325 100,83.325 C90.8208333,83.325 83.3333333,90.8125 83.3333333,99.9916667 C83.3333333,109.170833 90.8208333,116.658333 100,116.658333 C109.179167,116.658333 116.666667,109.170833 116.666667,99.9916667 Z M150,92.8958333 L150,107.35 C150,108.325 149.220833,109.5 148.175,109.691667 L136.129167,111.516667 C135.4125,113.6 134.633333,115.554167 133.591667,117.441667 C135.804167,120.633333 138.15,123.495833 140.558333,126.425 C140.95,126.879167 141.208333,127.466667 141.208333,128.054167 C141.208333,128.641667 141.0125,129.095833 140.620833,129.55 C139.058333,131.633333 130.270833,141.204167 128.054167,141.204167 C127.466667,141.204167 126.883333,140.941667 126.3625,140.616667 L117.379167,133.5875 C115.491667,134.5625 113.470833,135.4125 111.454167,136.0625 C111,140.033333 110.608333,144.266667 109.566667,148.170833 C109.304167,149.2125 108.395833,149.995833 107.225,149.995833 L92.7708333,149.995833 C91.6,149.995833 90.5583333,149.15 90.4291667,148.041667 L88.6041667,136.0625 C86.5875,135.4125 84.6333333,134.629167 82.7458333,133.654167 L73.5666667,140.620833 C73.1125,141.0125 72.525,141.208333 71.9375,141.208333 C71.35,141.208333 70.7666667,140.945833 70.3083333,140.491667 C66.8583333,137.366667 62.3,133.329167 59.5666667,129.554167 C59.2416667,129.1 59.1125,128.579167 59.1125,128.058333 C59.1125,127.470833 59.3083333,127.016667 59.6333333,126.5625 C61.8458333,123.566667 64.2541667,120.704167 66.4708333,117.641667 C65.3625,115.558333 64.4541667,113.408333 63.8,111.195833 L51.8875,109.4375 C50.7791667,109.241667 50,108.2 50,107.095833 L50,92.6416667 C50,91.6666667 50.7791667,90.4916667 51.7583333,90.3 L63.8666667,88.475 C64.5166667,86.3916667 65.3625,84.4375 66.4041667,82.4875 C64.1916667,79.3625 61.8458333,76.4333333 59.4375,73.5041667 C59.0458333,73.05 58.7875,72.5291667 58.7875,71.9416667 C58.7875,71.3541667 59.05,70.9 59.375,70.4458333 C60.9375,68.2958333 69.725,58.7916667 71.9416667,58.7916667 C72.5291667,58.7916667 73.1125,59.0541667 73.6333333,59.4416667 L82.6166667,66.4083333 C84.5041667,65.4333333 86.525,64.5833333 88.5416667,63.9333333 C88.9958333,59.9625 89.3875,55.7291667 90.4291667,51.825 C90.6916667,50.7833333 91.6,50 92.7708333,50 L107.225,50 C108.395833,50 109.4375,50.8458333 109.566667,51.9541667 L111.391667,63.9333333 C113.408333,64.5833333 115.3625,65.3666667 117.25,66.3416667 L126.495833,59.375 C126.8875,58.9833333 127.470833,58.7875 128.058333,58.7875 C128.645833,58.7875 129.229167,59.05 129.6875,59.4375 C133.1375,62.6291667 137.695833,66.6625 140.429167,70.5041667 C140.754167,70.8958333 140.883333,71.4166667 140.883333,71.9375 C140.883333,72.525 140.6875,72.9791667 140.3625,73.4333333 C138.15,76.4291667 135.741667,79.2916667 133.525,82.3541667 C134.633333,84.4375 135.541667,86.5875 136.195833,88.7333333 L148.108333,90.5583333 C149.216667,90.7541667 149.995833,91.7958333 149.995833,92.9 L150,92.8958333 Z" id="cog" fill="#00272C"></path>
                    </g>
                  </g>
                </svg>
              </div>
              Dashboard
            </div>
          </div>
        )}
      </div>
    )  
  }
})