import React from "react";
import PropTypes from "prop-types";
import { withRouter } from "react-router-dom";
import { Helmet } from "react-helmet";
import getTitle from "helpers/getTitle";

const OfficeMap = props => {
  const { pathname } = props.location;
  let title = getTitle(pathname) !== "Room Finder" ? getTitle(pathname) : "";
  if (title) {
    title = `- ${title}`;
  }

  const highlightStyles = {
    fill: "url(#gradient-1)"
  };

  return (
    <div className="OfficeMap" aria-hidden="true">
      <Helmet>
        <title>{`Room Finder ${title}`}</title>
        <meta property="og:type" content="website" />
        <meta property="og:site_name" content="Room Finder" />
        <meta property="og:title" content={`Room Finder ${title}`} />
        <meta property="og:description" content={`Room Finder ${title}`} />
        <meta
          property="og:image"
          content="http://embed.widencdn.net/img/masonite/1fjhmcfznp/exact/Ybor-Exterior_2017_0005.jpeg"
        />
      </Helmet>
      <svg
        id="Map"
        xmlns="http://www.w3.org/2000/svg"
        width="720"
        height="375"
        viewBox="0 0 720 375"
        style={{ width: "100%", height: "100vh" }}
      >
        <g fill="none" fillRule="evenodd" transform="translate(18 13)">
          <g transform="translate(226 1)">
            <polygon
              className="Room"
              onClick={() => props.history.push("/larmon/")}
              style={"/larmon/" === pathname ? highlightStyles : null}
              points="86 199 136 199 136 295 118.5 295 118.5 348 47.3555322 348 47.3555322 341.5 0 341.5 0 283 20.5 246.5"
              transform="translate(-226 0)"
            />
            <rect
              className="Room"
              onClick={() => props.history.push("/optimize/")}
              style={"/optimize/" === pathname ? highlightStyles : null}
              width="21"
              height="30"
              x="331"
            />
            <rect
              className="Room"
              onClick={() => props.history.push("/inspire/")}
              style={"/inspire/" === pathname ? highlightStyles : null}
              width="21"
              height="29"
              x="331"
              y="31"
            />
            <rect
              className="Room"
              onClick={() => props.history.push("/discover/")}
              style={"/discover/" === pathname ? highlightStyles : null}
              width="21"
              height="29"
              x="331"
              y="61"
            />
            <rect
              className="Room"
              onClick={() => props.history.push("/enhance/")}
              style={"/enhance/" === pathname ? highlightStyles : null}
              width="21"
              height="26"
              x="331"
              y="91"
            />
            <rect
              className="Room"
              onClick={() => props.history.push("/ybor/")}
              style={"/ybor/" === pathname ? highlightStyles : null}
              width="41"
              height="35"
              x="329"
              y="228"
            />
            <rect
              className="Room"
              onClick={() => props.history.push("/el-centro/")}
              style={"/el-centro/" === pathname ? highlightStyles : null}
              width="39"
              height="35"
              x="417"
              y="228"
            />
            <rect
              className="Room"
              onClick={() => props.history.push("/purpose/")}
              style={"/purpose/" === pathname ? highlightStyles : null}
              width="72"
              height="61"
              x="256"
              y="286"
            />
            <rect
              className="Room"
              onClick={() => props.history.push("/influence/")}
              style={"/influence/" === pathname ? highlightStyles : null}
              width="80"
              height="117"
              x="375"
            />
            <rect
              className="Room"
              onClick={() => props.history.push("/performance/")}
              style={"/performance/" === pathname ? highlightStyles : null}
              width="51"
              height="42"
              x="256"
              y="222"
            />
            <rect
              className="Room"
              onClick={() => props.history.push("/breakthrough/")}
              style={"/breakthrough/" === pathname ? highlightStyles : null}
              width="25"
              height="25"
              y="207"
            />
            <rect
              className="Room"
              onClick={() => props.history.push("/excellence/")}
              style={"/excellence/" === pathname ? highlightStyles : null}
              width="26"
              height="25"
              x="25"
              y="207"
            />
            <rect
              className="Room"
              onClick={() => props.history.push("/maximize/")}
              style={"/maximize/" === pathname ? highlightStyles : null}
              width="25"
              height="25"
              x="26"
              y="259"
            />
            <rect
              className="Room"
              onClick={() => props.history.push("/focus/")}
              style={"/focus/" === pathname ? highlightStyles : null}
              width="25"
              height="25"
              y="259"
            />
          </g>
          <g stroke="#979797">
            <path d="M198.56632 118.747764L216.080774 118.747764M231.441193 118.5L376.042723 118.5M410.441193 118.5L449.451936 118.5M510.441193 118.5L534.134068 118.5M541.441193 118.5L607.106768 118.5M623.441193 118.5L682.56632 118.5M612.441193 106.5L667.75251 106.5M600.75251 96.5L600.75251 118.5M578.693064 91.5L556.713605 91.5M578.693064 61.5L556.713605 61.5M578.693064 31.5L556.713605 31.5M556.693064 10.9108142L556.693064.5M556.693064 41.1122834L556.693064 20.7441301M556.693064 72.1122834L556.693064 51.7441301M556.713605 100.5L556.693064 81.7441301M600.75251.5L600.75251 10.9108142M600.75251 18.8383289L600.75251 88.056079M578.75251.5L578.75251 118.5M164.064848 144.5L164.064848 236.5M162.713568 257.423752L162.713568 348.872529" />
            <polyline points="20.566 247.5 0 283.989 0 342.344 8.736 342.344" />
            <polyline points="18.156 342.344 47.689 342.344 47.689 348.873 617.887 348.873" />
            <polyline points="635.401 348.873 682.086 348.873 682.086 132.775" />
            <path d="M682.56632,120.459432 L682.56632,118.5" />
            <polyline points="680.95 118.5 680.95 .5 618.65 .5" />
            <path d="M595.06632.5L602.198698.5M587.814804.5L372.508954.5" />
            <polyline points="365.011 .5 361.768 .5 20.566 247.5 0 283.989 0 342.344 8.252 342.344" />
            <polyline points="122.775 173.827 122.775 200.155 136.019 200.155 136.019 198.174 136.019 221.779 139.915 221.779" />
            <polyline points="136.019 221.779 136.019 236.029 152.604 236.029" />
            <path d="M150.78632 204.846186L164.064848 204.846186M150.78632 221.779339L164.064848 221.779339M136.018906 191.163571L136.018906 164.295145M145.399745 172.182887L164.064848 172.182887M145.399745 189.012299L164.064848 189.012299M136.018906 189.012299L137.797097 189.012299M136.018906 172.182887L137.797097 172.182887" />
            <polyline points="86.289 200.146 100.052 200.146 100.052 206.441" />
            <polyline points="110.653 206.441 110.653 200.146 122.775 200.155" />
            <path d="M136.132798,348.872529 L136.132798,305.29437" />
            <polyline points="136.133 296.197 118.142 296.197 118.142 327.083" />
            <path d="M118.14228 348.872529L118.14228 342.344444M136.132798 319.320667L118.14228 319.320667M145.651963 311.640174L162.713568 311.640174M146.585749 296.196898L162.713568 296.196898" />
            <polyline points="152.445 257.424 136.133 257.424 136.133 296.197" />
            <path d="M136.132798 275.429165L140.283982 275.429165M150.78632 275.429165L162.713568 275.429165M163.20149 257.423752L160.70604 257.423752M164.064848 236.02883L160.70604 236.02883" />
            <polyline points="224.895 207.737 276.895 207.737 276.895 233.737 267.908 233.737" />
            <polyline points="250.948 208 250.948 233.774 246.066 233.774 256.912 233.774" />
            <polyline points="225.48 207.963 225.48 233.737 235.215 233.737" />
            <polyline points="235.215 259.92 225.48 259.92 225.48 285.443 240.407 285.443 240.407 284.322 259.635 284.322 259.635 295.354 252.588 295.354" />
            <polyline points="240.407 285.443 240.407 295.354 247.626 295.354" />
            <polyline points="245.525 259.92 251.318 259.92 257.152 259.92" />
            <path d="M251.338479,259.920484 L251.338479,283.942411" />
            <polyline points="268.034 259.92 276.895 259.92 276.895 284.886 259.635 284.886" />
            <path d="M375.613952 348.872529L375.613952 332.518253M375.613952 314.2L375.613952 265.48M376.042723 118.5L376.042723 228.328743" />
            <polyline points="481.546 122.2 481.546 130.112 554.579 130.112 554.579 118.5 554.579 131.834" />
            <polyline points="554.579 147.925 554.579 201.204 554.579 203.051" />
            <polyline points="554.579 201.204 496.555 201.204 496.555 187.843 499.245 187.843" />
            <polyline points="499.14 162.749 496.555 162.749 496.555 149.394 554.579 149.394" />
            <path d="M507.940453 162.748602L507.940453 187.842678M507.940453 173.904213L554.578511 173.904213M507.940453 176.383159L554.578511 176.383159M522.696337 162.748602L522.696337 173.904213M522.696337 176.383159L522.696337 187.842678M596.136624 228.328743L583.008925 228.328743" />
            <polyline points="568.266 228.329 554.579 228.329 554.579 222.089 481.546 222.089 481.546 238.72" />
            <polyline points="481.546 253.72 481.546 266.19 481.546 277.757" />
            <polyline points="533.77 222.089 533.77 265.739 481.546 265.739" />
            <path d="M533.769504,258.565211 L544.519642,258.565211" />
            <polyline points="538.449 258.565 538.449 265.729 538.449 273.331" />
            <path d="M533.769504 265.738665L538.449333 265.738665M554.578511 286.71792L554.578511 348.872529M481.54632 348.872529L481.54632 339.233132" />
            <polyline points="481.546 303.688 481.546 286.718 554.579 286.718" />
            <path d="M554.578511,273.331311 L554.578511,228.328743" />
            <polyline points="554.579 264.047 596.137 264.047 596.137 228.329" />
            <polyline points="642.617 228.329 642.617 264.047 682.086 264.047" />
            <path d="M642.06632 228.5L654.854865 228.5M670.06632 228.5L682.364876 228.5" />
            <path d="M641.56632,274.5 L641.56632,278.5 L674.56632,278.5 L674.56632,274.5 L641.56632,274.5 Z" />
            <path d="M556.693064 118.5L556.693064 110.199804M456.899482 131.834377L456.899482 234.464196" />
            <polyline points="456.899 176.383 485.284 176.383 485.284 149.394 466.723 149.394" />
            <path d="M459.54632 149.394465L456.899482 149.394465M483.626524 130.141662L483.626524 131.834377M483.626524 141.218347L483.626524 149.394465M456.899482 201.203932L458.654553 201.203932" />
            <polyline points="466.387 201.204 485.284 201.204 485.284 187.843 480.267 187.843 480.267 176.383" />
            <path d="M483.388708 201.203932L483.388708 210.457254M483.388708 220.018672L483.388708 222.088647" />
            <polyline points="418.584 257.197 422.229 269.993 444.565 276.011 454.011 266.604" />
            <path d="M444.565283 276.011495L447.730689 289.84M422.228657 269.992554L412.3593 279.509362" />
            <polyline points="376.043 215.214 392.699 215.214 404.343 195.196 397.814 183.149" />
            <path d="M404.343084 195.195968L417.513945 195.195968M392.699433 215.21441L399.198986 226.874634" />
            <polyline points="376.043 158.723 391.677 158.723 403.53 138.839 396.821 127.079" />
            <path d="M403.530013 138.838888L416.823913 138.838888M391.676941 158.722739L398.046423 171.422222" />
            <polyline points="429.175 118.5 429.175 104.045 436.686 99.678" />
            <polyline points="429.175 104.045 405.448 90.215 393.654 97.13" />
            <polyline points="405.448 90.215 405.448 66.012 393.654 60.09" />
            <path d="M405.447938,66.0119554 L416.823913,60.0899397" />
            <polyline points="346.17 16.6 353.847 27.023 376.843 25.1 382.829 12.966" />
            <path d="M376.842774 25.0997257L384.501419 35.942358M353.846751 27.0226733L348.557515 39.4804008" />
            <polyline points="338.566 45.394 332.749 57.372 340.294 68.263" />
            <polyline points="332.749 57.372 309.082 59.403 301.405 48.711" />
            <path d="M309.082098,59.4034238 L303.741958,71.1771563" />
            <polyline points="333.546 97.13 344.11 102.648 344.11 118.5" />
            <polyline points="344.11 102.648 365.011 91.43 365.011 78.353" />
            <path d="M365.011115,91.4301188 L376.042723,97.8201908" />
            <polyline points="293.745 77.546 288.171 89.412 295.543 100.445" />
            <polyline points="288.171 89.412 264.17 91.43 256.47 81.009" />
            <path d="M264.169795,91.4301188 L258.971459,104.045037" />
            <polyline points="189.576 125.376 198.566 137.766 195.382 145.305" />
            <path d="M198.56632,137.765674 L211.9293,136.962646" />
            <polyline points="232.948 140.44 244.498 146.213 244.498 160.08" />
            <polyline points="244.498 146.213 264.17 135.34 264.17 118.748" />
            <path d="M264.169795,135.340269 L275.373012,142.222252" />
            <polyline points="289.864 140.44 301.646 146.213 301.646 159.4" />
            <polyline points="301.646 146.213 321.995 135.34 321.995 118.748" />
            <path d="M321.995326,135.340269 L333.54632,141.531216" />
            <polyline points="246.306 186.886 235.215 192.673 235.215 206.01" />
            <path d="M235.215299,192.673386 L227.539376,188.580908" />
            <polyline points="203.816 190.627 191.298 190.627 184.926 200.71" />
            <path d="M191.298166 190.627147L179.426011 168.897437M179.426011 168.897437L186.302219 158.186383M179.426011 168.897437L170.595217 168.897437" />
            <polyline points="166.537 221.779 179.426 221.779 183.567 214.75" />
            <path d="M179.426011,221.779339 L186.302219,233.737058" />
            <polyline points="166.537 272.403 179.426 272.403 186.302 261.368" />
            <path d="M179.426011,272.403483 L183.566701,279.668059" />
            <polyline points="174.638 300.406 186.302 306.864 186.302 330.695 174.638 337.162" />
            <path d="M186.302219 330.694722L197.772107 337.162133M186.302219 306.86353L197.772107 300.40566" />
            <polyline points="225.48 308.165 224.708 321.049 213.621 327.083" />
            <polyline points="224.708 321.049 245.525 333.008 257.152 326.348" />
            <path d="M245.525067,333.008386 L245.525067,345.608486" />
            <polyline points="275.726 327.912 286.77 321.049 286.77 308.165" />
            <polyline points="286.77 321.049 307.613 333.008 318.022 327.029" />
            <path d="M307.612642,333.008386 L307.612642,345.608486" />
            <polyline points="312.281 303.635 319.159 291.992 331.869 291.992" />
            <polyline points="319.159 291.992 306.845 270.927 294.236 270.927" />
            <path d="M306.697874,270.927159 L313.560773,259.920484" />
            <polyline points="299.971 225.126 311.497 218.265 311.497 194.867 287.877 181.12 287.877 167.98" />
            <polyline points="287.877 181.12 267.459 191.975 267.459 206.01" />
            <path d="M267.458744 191.974817L256.068205 185.466727M311.497207 218.264855L323.238789 224.469066" />
            <polyline points="335.493 216.376 347.928 216.376 354.668 228.329" />
            <polyline points="347.928 216.376 359.88 195.669 353.904 184.302" />
            <path d="M359.879755,195.66867 L373.449367,195.66867" />
            <polyline points="354.668 172.25 347.928 160.88 334.825 160.88" />
            <polyline points="347.928 160.88 359.88 140.44 353.904 128.467" />
            <path d="M359.879755,140.440424 L373.449367,140.440424" />
            <polyline points="341.375 327.912 353.012 321.73 375.614 333.928" />
            <path d="M426.873409,303.634595 L426.873409,316.787336 C419.694428,320.627024 416.104938,322.546868 416.104938,322.546868" />
            <polyline points="426.873 316.787 447.731 327.912 458.875 321.73" />
            <path d="M447.730689,327.912499 L447.730689,342.344444" />
            <path d="M451.56632 49.5L451.56632 62.5 457.56632 62.5 457.56632 49.5 451.56632 49.5zM451.56632 63.5L451.56632 77.5 457.56632 77.5 457.56632 63.5 451.56632 63.5zM458.56632 49.5L458.56632 62.5 464.56632 62.5 464.56632 49.5 458.56632 49.5zM458.56632 63.5L458.56632 77.5 464.56632 77.5 464.56632 63.5 458.56632 63.5zM486.56632 49.5L486.56632 62.5 492.56632 62.5 492.56632 49.5 486.56632 49.5zM486.56632 63.5L486.56632 77.5 492.56632 77.5 492.56632 63.5 486.56632 63.5zM493.56632 49.5L493.56632 62.5 499.56632 62.5 499.56632 49.5 493.56632 49.5zM493.56632 63.5L493.56632 77.5 499.56632 77.5 499.56632 63.5 493.56632 63.5zM493.56632 78.5L493.56632 92.5 499.56632 92.5 499.56632 78.5 493.56632 78.5zM486.56632 78.5L486.56632 92.5 492.56632 92.5 492.56632 78.5 486.56632 78.5zM523.56632 49.5L523.56632 62.5 529.56632 62.5 529.56632 49.5 523.56632 49.5zM523.56632 63.5L523.56632 77.5 529.56632 77.5 529.56632 63.5 523.56632 63.5zM530.56632 49.5L530.56632 62.5 536.56632 62.5 536.56632 49.5 530.56632 49.5zM530.56632 63.5L530.56632 77.5 536.56632 77.5 536.56632 63.5 530.56632 63.5zM530.56632 78.5L530.56632 92.5 536.56632 92.5 536.56632 78.5 530.56632 78.5zM523.56632 78.5L523.56632 92.5 529.56632 92.5 529.56632 78.5 523.56632 78.5zM415.56632 4.5L415.56632 17.5 421.56632 17.5 421.56632 4.5 415.56632 4.5zM415.56632 18.5L415.56632 32.5 421.56632 32.5 421.56632 18.5 415.56632 18.5zM422.56632 4.5L422.56632 17.5 428.56632 17.5 428.56632 4.5 422.56632 4.5zM422.56632 18.5L422.56632 32.5 428.56632 32.5 428.56632 18.5 422.56632 18.5zM451.56632 4.5L451.56632 17.5 457.56632 17.5 457.56632 4.5 451.56632 4.5zM451.56632 18.5L451.56632 32.5 457.56632 32.5 457.56632 18.5 451.56632 18.5zM458.56632 4.5L458.56632 17.5 464.56632 17.5 464.56632 4.5 458.56632 4.5zM458.56632 18.5L458.56632 32.5 464.56632 32.5 464.56632 18.5 458.56632 18.5zM487.56632 4.5L487.56632 17.5 493.56632 17.5 493.56632 4.5 487.56632 4.5zM487.56632 18.5L487.56632 32.5 493.56632 32.5 493.56632 18.5 487.56632 18.5zM494.56632 4.5L494.56632 17.5 500.56632 17.5 500.56632 4.5 494.56632 4.5zM494.56632 18.5L494.56632 32.5 500.56632 32.5 500.56632 18.5 494.56632 18.5zM523.56632 4.5L523.56632 17.5 529.56632 17.5 529.56632 4.5 523.56632 4.5zM523.56632 18.5L523.56632 32.5 529.56632 32.5 529.56632 18.5 523.56632 18.5zM530.56632 4.5L530.56632 17.5 536.56632 17.5 536.56632 4.5 530.56632 4.5zM530.56632 18.5L530.56632 32.5 536.56632 32.5 536.56632 18.5 530.56632 18.5zM51.7647209 246.6831L58.2303587 255.582287 82.5008685 237.948729 76.0352307 229.049542 51.7647209 246.6831z" />
            <path
              d="M59.3355955,277.919949 L63.7935541,284.00951 L80.9337348,271.650394 L76.4757763,265.560833 L59.3355955,277.919949 Z"
              transform="rotate(36 70.135 274.785)"
            />
            <path
              d="M59.3355955,299.919949 L63.7935541,306.00951 L80.9337348,293.650394 L76.4757763,287.560833 L59.3355955,299.919949 Z"
              transform="rotate(36 70.135 296.785)"
            />
            <path d="M25.202415,244.912093 L29.904697,251.384229 L85.7268696,210.827047 L81.0245876,204.354911 L25.202415,244.912093 Z" />
            <path d="M118.14228,284.415225 L136.132798,284.415225" />
            <path d="M357.56632 53.5L357.56632 64.5 380.56632 64.5 380.56632 53.5 357.56632 53.5zM602.56632 171.5L602.56632 180.5 635.56632 180.5 635.56632 171.5 602.56632 171.5z" />
          </g>
        </g>
      </svg>
    </div>
  );
};

export default withRouter(OfficeMap);

OfficeMap.propTypes = {
  highlight: PropTypes.oneOf([
    "/",
    "/optimize",
    "/inspire",
    "/discover",
    "/enhance",
    "/ybor",
    "/el-centro",
    "/purpose",
    "/influence",
    "/performance",
    "/breakthrough",
    "/excellence",
    "/maximize",
    "/focus"
  ])
};
