// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.

<template>
    <div class="header">
        <div class="header__content-holder">
            <div class="header__content-holder__logo-area">
                <svg width="125" height="50" viewBox="0 0 125 50" fill="none" xmlns="http://www.w3.org/2000/svg" alt="storj icon">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M42.3431 18.0284C42.1011 18.1731 42.0171 18.3205 42.0178 18.5966C42.0261 22.8699 42.0254 27.1434 42.0189 31.4158C42.0185 31.6726 42.0838 31.8274 42.3192 31.9629C43.8364 32.8402 44.6043 34.4585 44.3318 36.1596C44.0704 37.7897 42.7681 39.1288 41.0811 39.4494C40.1031 39.636 39.1557 39.4875 38.2985 38.9612C38.0372 38.8012 37.8532 38.8295 37.6082 38.9706C33.9366 41.0985 30.261 43.2208 26.5811 45.3351C26.3295 45.48 26.2352 45.6391 26.2359 45.933C26.2397 47.989 24.6537 49.7782 22.6724 49.9776C20.5622 50.1907 18.6966 48.8639 18.2407 46.8151C18.1708 46.5001 18.1473 46.1707 18.1401 45.8484C18.1348 45.6299 18.0743 45.4962 17.8802 45.3837C14.1495 43.2365 10.4219 41.0842 6.69594 38.9287C6.49419 38.8111 6.33565 38.8102 6.13211 38.9334C3.69746 40.3997 0.594411 38.9941 0.0780575 36.2548C-0.247742 34.5243 0.456254 32.9063 2.0042 31.9949C2.24871 31.8504 2.35933 31.705 2.35888 31.406C2.34768 27.1322 2.34948 22.8593 2.35619 18.5863C2.35642 18.3295 2.28969 18.1776 2.0548 18.0412C0.500814 17.1381 -0.230277 15.5689 0.0682052 13.8071C0.364672 12.0569 1.71736 10.7729 3.4778 10.522C4.42138 10.3878 5.33138 10.5599 6.14779 11.0814C6.33745 11.2028 6.47829 11.199 6.67131 11.0877C10.3863 8.9367 14.1042 6.79175 17.8251 4.65174C18.0501 4.52224 18.1379 4.37371 18.1386 4.10845C18.1446 1.75492 20.0034 -0.0467939 22.3585 0.000926284C24.1942 0.0376686 25.9119 1.55374 26.1723 3.36621C26.1793 3.41548 26.1875 3.45916 26.1956 3.50217V3.50219C26.2149 3.60466 26.2334 3.70333 26.2334 3.86492C26.2334 4.36743 26.4184 4.58049 26.8093 4.80408C30.4198 6.87106 34.0201 8.95417 37.618 11.0409C37.8652 11.1847 38.0448 11.1905 38.3023 11.0444C40.7462 9.64981 43.7093 10.9864 44.3042 13.7461C44.3434 13.9258 44.3525 14.1121 44.3611 14.2881C44.3648 14.3636 44.3685 14.4372 44.3743 14.5076C44.3342 16.0741 43.6546 17.2416 42.3431 18.0284ZM17.6556 32.0174L17.6168 32.0175C16.3401 32.0175 15.1442 31.6613 14.1321 31.0436C11.2906 32.6912 9.15439 33.9227 7.7233 34.738C7.43198 34.9036 7.33435 35.0915 7.33727 35.4238C7.35563 37.2835 5.94181 38.7741 4.08397 38.7879C1.96549 38.8039 0.655569 37.0295 0.737971 35.2972C0.809176 33.8183 2.07588 32.1161 4.15876 32.1694C4.78483 32.1862 5.35694 32.4017 5.89412 32.7261C6.00832 32.7951 6.22663 32.8084 6.33904 32.7445C6.59064 32.6013 6.84211 32.4578 7.09346 32.3141L7.0967 32.3364L12.2763 29.3459C11.5069 28.3014 11.0527 27.0198 11.0527 25.6289C11.0527 23.8295 11.8133 22.2122 13.0335 21.0551L8.58736 18.4835L8.56042 18.5303C7.84767 18.1179 7.13548 17.7047 6.42435 17.2897C6.19349 17.155 6.03765 17.1662 5.81239 17.3094C3.81594 18.5786 1.16968 17.4042 0.775141 15.084C0.465687 13.2673 1.65603 11.57 3.53067 11.2613C5.44158 10.9472 7.02468 12.3019 7.28151 13.9215C7.28822 13.9638 7.29634 14.0065 7.3045 14.0493C7.33063 14.1867 7.35705 14.3255 7.33794 14.4572C7.27524 14.8905 7.45661 15.1192 7.83257 15.3325C9.27419 16.1514 10.7107 16.9791 12.1472 17.8068C13.2086 18.4185 14.27 19.0301 15.3334 19.638C15.6027 19.5408 15.8802 19.4602 16.1645 19.3976C17.2751 17.777 19.0269 16.6589 21.0142 16.329V9.96231H20.9659C20.9672 9.12285 20.9692 8.28338 20.9718 7.44386C20.9727 7.16785 20.8325 7.07129 20.6315 6.96151C19.3224 6.24571 18.7799 4.97093 18.8889 3.8234C19.0307 2.33624 19.8366 1.3144 21.2824 0.873714C22.8709 0.389567 24.5646 1.20664 25.2276 2.73615C25.885 4.25244 25.3389 6.03063 23.902 6.85666C23.5012 7.08697 23.4013 7.33498 23.4036 7.76289C23.4161 10.0783 23.4148 12.3939 23.4135 14.7095V14.7104C23.4132 15.2467 23.4129 15.7829 23.4128 16.3191C25.6546 16.6719 27.565 18.0218 28.6354 19.8979L34.7101 16.3776L34.7097 16.3768C35.3733 15.9951 36.0374 15.6141 36.7018 15.2337C36.9593 15.0863 37.0395 14.9216 37.0368 14.6328C37.0177 12.9375 38.0538 11.6479 39.703 11.2825C41.5823 10.8663 43.4639 12.301 43.6244 14.2204C43.772 15.9896 42.5722 17.4884 40.9168 17.7788C40.0664 17.9277 39.2558 17.774 38.5328 17.2886C38.3299 17.1523 38.1897 17.1544 37.9831 17.2738L37.1928 17.7321L32.4269 20.4839C31.7098 20.8963 30.9924 21.3081 30.2747 21.7194C30.2379 21.7405 30.2053 21.7616 30.1769 21.783L30.1558 21.7952C31.7921 22.7519 32.8948 24.5023 32.8948 26.519C32.8948 27.5351 32.6139 28.4864 32.1239 29.3026L32.7137 29.6437C32.7526 29.6979 32.8141 29.747 32.9026 29.7973C34.5999 30.764 36.2902 31.7431 37.9766 32.7288C38.2007 32.8601 38.3525 32.8247 38.5625 32.6952C40.5554 31.4635 43.0225 32.4918 43.5655 34.7707C44.0185 36.6724 42.6349 38.5529 40.6822 38.7606C38.6931 38.9728 36.9871 37.3736 37.0386 35.4159C37.0471 35.0781 36.9358 34.8975 36.6474 34.7342C36.4926 34.6463 36.3378 34.5582 36.1831 34.47L36.2059 34.4524L30.4037 31.0895C29.6646 31.5746 28.8013 31.8923 27.8701 31.9875C27.7466 32.0074 27.6211 32.0175 27.4946 32.0175H23.4595V32.5302C23.4252 32.5851 23.4078 32.66 23.4078 32.7651C23.4154 36.0361 23.4148 39.3077 23.4078 42.5793C23.4071 42.8132 23.5122 42.9197 23.7025 43.0169C25.1051 43.7383 25.6298 45.1789 25.484 46.2702C25.2686 47.8792 24.2627 48.9252 22.7316 49.2243C20.9935 49.5644 19.1926 48.2399 18.9216 46.4859C18.6881 44.9761 19.5441 43.5644 20.6785 43.0173C20.895 42.9136 20.9698 42.7783 20.9696 42.5406C20.9635 39.1724 20.9629 35.8049 20.9703 32.4365C20.9703 32.3933 20.97 32.2537 20.9693 32.0175H17.6655L17.6556 32.0174ZM58.1648 32.9824C61.5132 32.9824 63.8637 31.3426 63.8637 28.2605V28.2161C63.8637 25.511 62.0897 24.3791 58.9409 23.5587C56.2578 22.8713 55.5926 22.45 55.5926 21.43V21.3857C55.5926 20.6318 56.28 20.0331 57.5883 20.0331C58.8966 20.0331 60.2492 20.6096 61.624 21.5631L63.398 18.991C61.8236 17.7271 59.8944 17.0175 57.6326 17.0175C54.4617 17.0175 52.1999 18.8801 52.1999 21.6961V21.7405C52.1999 24.8226 54.2177 25.6874 57.3444 26.4856C59.9388 27.1508 60.471 27.5943 60.471 28.459V28.5034C60.471 29.4125 59.6283 29.9668 58.2313 29.9668C56.4574 29.9668 54.9939 29.2351 53.5969 28.0821L51.579 30.499C53.4416 32.162 55.8143 32.9824 58.1648 32.9824ZM115.897 20.8091H120.91V27.2321C120.91 28.9985 120.126 29.7618 118.863 29.7618C117.795 29.7618 116.946 29.1948 116.075 28.2353L113.962 30.5905C115.007 31.8336 116.576 32.8804 118.95 32.8804C122.174 32.8804 124.352 31.0921 124.352 27.3847V17.3965H120.91H115.897V20.8091ZM78.5257 20.584H73.9746V32.6767H70.4453V20.584H65.8942V17.3965H78.5257V20.584ZM88.0031 32.9315C92.7202 32.9315 96.1488 29.3767 96.1488 25.0368V24.9931C96.1488 20.6532 92.7639 17.142 88.0467 17.142C83.3296 17.142 79.901 20.6968 79.901 25.0368V25.0804C79.901 29.4203 83.2859 32.9315 88.0031 32.9315ZM92.4917 25.0289V24.9859C92.4917 22.4021 90.6276 20.249 88.001 20.249C85.3744 20.249 83.5527 22.3591 83.5527 24.9428V24.9859C83.5527 27.5696 85.4168 29.7227 88.0434 29.7227C90.67 29.7227 92.4917 27.6127 92.4917 25.0289ZM108.268 32.6767H112.193L108.464 27.2195C110.405 26.4991 111.735 24.9493 111.735 22.4826V22.439C111.735 19.2956 109.576 17.3965 105.979 17.3965H98.9134V32.6767H102.359V27.787H104.997L108.268 32.6767ZM108.189 22.5896V22.5477C108.189 21.1651 107.227 20.4529 105.659 20.4529H102.363V24.6634H105.722C107.29 24.6634 108.189 23.8255 108.189 22.5896ZM40.3369 34.5474C39.8017 34.5463 39.411 34.9415 39.411 35.4857C39.4112 36.0173 39.8217 36.4338 40.3445 36.4338C40.8329 36.4329 41.302 35.964 41.2964 35.4792C41.2912 34.9756 40.8521 34.5501 40.3369 34.5474ZM21.2462 4.04925C21.2482 3.52231 21.6589 3.11568 22.1896 3.11523C22.7211 3.11479 23.1287 3.52052 23.1307 4.04947C23.132 4.5567 22.6893 5.00522 22.1913 4.99895C21.6851 4.99402 21.2446 4.55087 21.2462 4.04925ZM4.02898 36.4338C4.54914 36.4381 4.96316 36.0207 4.96518 35.4895C4.96719 34.9451 4.57847 34.5479 4.04398 34.5474C3.52808 34.5474 3.07845 34.9807 3.08091 35.4754C3.08315 35.9705 3.53748 36.4291 4.02898 36.4338ZM22.1996 45.033C22.7298 45.0366 23.1327 45.4401 23.1302 45.9652C23.1268 46.4883 22.718 46.8824 22.1806 46.8791C21.6476 46.8764 21.2401 46.47 21.2459 45.9464C21.252 45.4257 21.6674 45.029 22.1996 45.033ZM3.08103 14.5417C3.09693 15.0612 3.517 15.4531 4.0544 15.4484C4.59829 15.4434 4.97335 15.057 4.96507 14.5087C4.95723 13.9632 4.57299 13.5944 4.01991 13.6027C3.49013 13.6104 3.06513 14.0354 3.08103 14.5417ZM40.3252 15.4499C39.7819 15.4461 39.4055 15.059 39.4109 14.5107C39.4163 13.9666 39.8017 13.5964 40.3547 13.6036C40.885 13.611 41.307 14.0322 41.2945 14.5412C41.282 15.057 40.859 15.4537 40.3252 15.4499ZM13.3333 25.6288C13.3333 27.8975 15.2511 29.7367 17.6167 29.7367L17.6594 29.7365L17.6654 29.7367H27.4946C27.5085 29.7367 27.5216 29.7334 27.5333 29.7277C29.2561 29.6038 30.614 28.2145 30.614 26.5189C30.614 24.7417 29.1224 23.3011 27.2824 23.3011H27.2738C27.2359 20.648 24.998 18.5086 22.2429 18.5086C20.1415 18.5086 18.341 19.7532 17.588 21.5211C15.2356 21.5359 13.3333 23.3693 13.3333 25.6288Z" fill="#133E9C"/>
                </svg>
                <div class="header__content-holder__logo-area__refresh-button" @click="onRefresh">
                    <svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg" alt="refresh image">
                        <rect class="refresh-button-svg-rect" x="1" y="1" width="40" height="40" rx="20" fill="#F4F6F9" stroke="#E8E8E8"/>
                        <path class="refresh-button-svg-path" d="M31 18.0586V12.1768L28.8784 14.2359C27 12.2353 24.2727 11 21.3034 11C15.6068 11 11 15.4712 11 21C11 26.5288 15.6057 31 21.3034 31C24.2125 31 26.8182 29.8232 28.6977 27.9417L27.0012 26.2355C25.6068 27.7056 23.5455 28.6464 21.3034 28.6464C16.9398 28.6464 13.425 25.2352 13.425 21C13.425 16.7649 16.9398 13.3536 21.3034 13.3536C23.6068 13.3536 25.7273 14.354 27.1818 15.8826L24.9398 18.0586L31 18.0586Z" fill="#133E9C"/>
                    </svg>
                </div>
            </div>
            <div class="header__content-holder__node-id-container">
                <b class="header__content-holder__node-id-container__title">Node ID:</b>
                <p class="header__content-holder__node-id-container__id">{{this.nodeId}}</p>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

import { NODE_ACTIONS } from '@/app/store/modules/node';

const {
    GET_NODE_INFO,
    SELECT_SATELLITE,
} = NODE_ACTIONS;

@Component
export default class SNOHeader extends Vue {
    public async onRefresh(): Promise<void> {
        const selectedSatellite = this.$store.state.node.selectedSatellite.id;

        try {
            await this.$store.dispatch(GET_NODE_INFO);
            await this.$store.dispatch(SELECT_SATELLITE, selectedSatellite);
        } catch (error) {
            console.error(`${error.message} satellite data.`);
        }
    }

    public get nodeId(): string {
        return this.$store.state.node.info.id;
    }
}
</script>

<style lang="scss">
    .header {
        width: 100%;
        height: 89px;
        display: flex;
        justify-content: center;
        background-color: #FFFFFF;

        &__content-holder {
            width: 822px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            &__logo-area {
                display: flex;
                align-items: center;

                &__refresh-button {
                    margin-left: 25px;
                    max-height: 42px;
                    cursor: pointer;

                    &:hover {

                        .refresh-button-svg-rect {
                            fill: #133E9C;
                        }

                        .refresh-button-svg-path {
                            fill: #FFFFFF;
                        }
                    }
                }
            }

            &__node-id-container {
                color: #535F77;
                height: 44px;
                padding: 0 14px 0 14px;
                display: flex;
                align-items: center;
                border: 1px solid #E8E8E8;
                border-radius: 12px;
                font-size: 14px;

                &__title {
                    min-width: 55px;
                    margin-right: 5px;
                }

                &__id {
                    font-size: 11px;
                }
            }
        }
    }
</style>
