import { Version } from '@microsoft/sp-core-library';
import {
  BaseClientSideWebPart,
  IPropertyPaneConfiguration,
  PropertyPaneTextField,
  PropertyPaneButton,
  PropertyPaneButtonType
} from '@microsoft/sp-webpart-base';
import { escape } from '@microsoft/sp-lodash-subset';

import styles from './SvgHeroWebPart.module.scss';
import * as strings from 'SvgHeroWebPartStrings';

//Import the special property pane controls from the PnP SPFx-Property-Controls package
import { PropertyFieldColorPicker, PropertyFieldColorPickerStyle } from '@pnp/spfx-property-controls/lib/PropertyFieldColorPicker';
import { PropertyFieldSpinButton } from '@pnp/spfx-property-controls/lib/PropertyFieldSpinButton';


export interface ISvgHeroWebPartProps {
  colorPants: string;
  colorHair: string;
  colorBelt: string;
  colorBuckle: string;
  colorSkin: string;
  colorCape: string;
  colorDiaper: string;
  colorShoes: string;
  colorShirt: string;
  colorLogo: string;
  height: number;
}

export default class SvgHeroWebPartWebPart extends BaseClientSideWebPart<ISvgHeroWebPartProps> {

  public render(): void {

    //This will draw the SVG version of the SharePoint PnP Super Hero with custom colors
    // You can find the SVG file at https://github.com/thechriskent/PnPMan
    this.domElement.innerHTML = `
      <div class="${ styles.svgHero }">
        <svg
            xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
            xmlns:dc="http://purl.org/dc/elements/1.1/"
            xmlns:cc="http://creativecommons.org/ns#"
            xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
            xmlns:svg="http://www.w3.org/2000/svg"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
            xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
            width="67.223289mm"
            height="${this.properties.height}mm"
            viewBox="0 0 67.223289 157.28004"
            version="1.1"
            id="svg8"
            inkscape:version="0.92.2 (5c3e80d, 2017-08-06)"
            sodipodi:docname="PnPMan.svg">
          <title
              id="title3738">SharePoint Patterns and Practices Hero</title>
          <defs
              id="defs2">
            <linearGradient
                id="linearGradient4571"
                osb:paint="solid">
              <stop
                  style="stop-color:#0072c6;stop-opacity:1;"
                  offset="0"
                  id="stop4569" />
            </linearGradient>
          </defs>
          <sodipodi:namedview
              id="base"
              pagecolor="#ffffff"
              bordercolor="#666666"
              borderopacity="1.0"
              inkscape:pageopacity="0.0"
              inkscape:pageshadow="2"
              inkscape:zoom="0.7"
              inkscape:cx="151.31995"
              inkscape:cy="407.70451"
              inkscape:document-units="mm"
              inkscape:current-layer="layer8"
              showgrid="false"
              inkscape:window-width="1920"
              inkscape:window-height="1013"
              inkscape:window-x="1591"
              inkscape:window-y="-9"
              inkscape:window-maximized="1"
              inkscape:pagecheckerboard="true"
              showborder="false" />
          <metadata
              id="metadata5">
            <rdf:RDF>
              <cc:Work
                  rdf:about="">
                <dc:format>image/svg+xml</dc:format>
                <dc:type
                    rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
                <dc:title>SharePoint Patterns and Practices Hero</dc:title>
                <dc:creator>
                  <cc:Agent>
                    <dc:title>Chris Kent</dc:title>
                  </cc:Agent>
                </dc:creator>
                <dc:rights>
                  <cc:Agent>
                    <dc:title>Do Whatever</dc:title>
                  </cc:Agent>
                </dc:rights>
                <cc:license
                    rdf:resource="" />
              </cc:Work>
            </rdf:RDF>
          </metadata>
          <g
              inkscape:groupmode="layer"
              id="layer8"
              inkscape:label="Cape"
              style="display:inline"
              transform="translate(-73.828052,-54.594358)">
            <path
                style="fill:${this.properties.colorCape};fill-opacity:1;stroke:none;stroke-width:0.26458332;stroke-opacity:1"
                d="m 88.210119,84.13992 c 12.252751,6.99256 25.906701,6.88219 38.459151,0 2.34659,38.04952 5.59332,67.93108 5.45227,107.78269 -17.5129,-2.47028 -32.417758,-2.59245 -49.363691,0 -0.173476,-39.71798 3.10568,-69.73317 5.45227,-107.78269 z"
                id="rect4612"
                inkscape:connector-curvature="0"
                sodipodi:nodetypes="ccccc" />
          </g>
          <g
              inkscape:groupmode="layer"
              id="layer2"
              inkscape:label="Hands"
              sodipodi:insensitive="true"
              transform="translate(-73.828052,-54.594358)">
            <path
                style="fill:${this.properties.colorSkin};fill-opacity:1;stroke-width:0.26458332"
                d="m 75.074853,137.96852 h 7.370537 c 0,0 0.879831,3.99705 0,5.66964 -0.711802,1.35316 -2.250924,2.61706 -3.779766,2.59859 -1.477364,-0.0179 -2.918781,-1.28278 -3.590771,-2.59859 -0.859564,-1.68309 0,-5.66964 0,-5.66964 z"
                id="rect3747"
                inkscape:connector-curvature="0"
                sodipodi:nodetypes="ccaaac" />
            <path
                sodipodi:nodetypes="ccaaac"
                inkscape:connector-curvature="0"
                id="path3751"
                d="m 132.6224,137.96651 h 7.37054 c 0,0 0.87983,3.99705 0,5.66964 -0.71181,1.35316 -2.25093,2.61706 -3.77977,2.59859 -1.47736,-0.0179 -2.91878,-1.28278 -3.59077,-2.59859 -0.85957,-1.68309 0,-5.66964 0,-5.66964 z"
                style="fill:${this.properties.colorSkin};fill-opacity:1;stroke-width:0.26458332" />
          </g>
          <g
              inkscape:groupmode="layer"
              id="layer7"
              inkscape:label="Shoes"
              transform="translate(-73.828052,-54.594358)">
            <path
                style="fill:${this.properties.colorShoes};fill-opacity:1;stroke:none;stroke-width:0.17497595;stroke-opacity:1"
                d="m 110.24099,206.38016 c -1.35211,0.77913 -2.28346,3.76297 -2.29286,5.49424 h 6.69174 6.69218 c 0.024,-1.66445 -0.94074,-4.71511 -2.29286,-5.49424 h -4.39932 z"
                id="rect4603"
                inkscape:connector-curvature="0"
                sodipodi:nodetypes="ccccccc" />
            <path
                inkscape:connector-curvature="0"
                id="path4609"
                d="m 95.925984,206.38016 c -1.352099,0.77913 -2.283451,3.76297 -2.292855,5.49424 h 6.691741 6.69216 c 0.024,-1.73127 -0.94076,-4.71511 -2.29286,-5.49424 h -4.3993 z"
                style="fill:${this.properties.colorShoes};fill-opacity:1;stroke:none;stroke-width:0.17497595;stroke-opacity:1"
                sodipodi:nodetypes="ccccccc" />
          </g>
          <g
              inkscape:groupmode="layer"
              id="layer5"
              inkscape:label="Pants"
              style="display:inline"
              transform="translate(-73.828052,-54.594358)">
            <path
                style="fill:${this.properties.colorPants};fill-opacity:1;stroke:none;stroke-width:0.62548369;stroke-opacity:1"
                d="m 93.430988,131.91908 c -0.789853,24.68681 2.395269,49.61773 2.494996,74.46108 h 8.798186 c -0.23779,-25.00941 2.57508,-49.73514 2.71526,-74.46108 z m 14.008442,0 c 0.1402,24.72594 3.03935,49.54616 2.80156,74.46108 h 8.7982 c 0.50064,-24.30882 3.59997,-49.70746 2.40921,-74.46108 z"
                id="rect4583"
                inkscape:connector-curvature="0"
                sodipodi:nodetypes="cccccccccc" />
          </g>
          <g
              inkscape:groupmode="layer"
              id="layer6"
              inkscape:label="Diaper"
              style="display:inline"
              transform="translate(-73.828052,-54.594358)">
            <path
                style="fill:${this.properties.colorDiaper};fill-opacity:1;stroke:none;stroke-width:1.10326862;stroke-opacity:1"
                d="m 360.14648,498.19727 c 9.55435,13.43769 21.39608,40.60447 40.78516,49.78515 3.09741,1.46661 7.18384,1.46661 10.28125,0 19.38908,-9.18068 31.23081,-36.34746 40.78516,-49.78515 h -45.92578 z"
                transform="scale(0.26458333)"
                id="rect4592"
                inkscape:connector-curvature="0"
                sodipodi:nodetypes="caaccc" />
          </g>
          <g
              inkscape:groupmode="layer"
              id="layer11"
              inkscape:label="Head"
              style="display:inline"
              transform="translate(-73.828052,-54.594358)">
            <path
                style="fill:${this.properties.colorSkin};fill-opacity:1;stroke:none;stroke-width:0.26937541;stroke-opacity:1"
                d="m 107.44202,57.980444 c -8.008983,0 -9.010901,3.156368 -9.07955,7.551478 -1.407168,-0.0049 -1.672678,1.411772 -1.552361,3.149161 0.118118,1.70561 -0.112374,3.197222 1.578716,3.197222 0.06272,0 0.127262,-0.01122 0.192754,-0.02791 0.427305,2.836924 1.564921,5.410595 3.345531,7.186642 v 3.732588 l -1.997168,0.105095 c -1.056021,0.05557 6.536348,3.539424 7.500898,3.506941 0.96454,-0.03248 8.58,-3.444292 7.51368,-3.502773 l -1.99224,-0.109262 v -3.768762 c 1.67356,-1.805707 2.87138,-4.409977 3.33261,-7.206795 0.12071,0.05322 0.23955,0.08423 0.35295,0.08423 1.6911,0 1.4606,-1.491612 1.57871,-3.197222 0.12111,-1.748666 -0.14743,-3.17382 -1.57871,-3.150196 -0.0403,7.94e-4 -0.0815,0.0076 -0.12299,0.0155 -0.0818,-4.402706 -1.10782,-7.565948 -9.07283,-7.565948 z"
                id="path4629"
                inkscape:connector-curvature="0"
                sodipodi:nodetypes="cccscccssscccsccccc" />
          </g>
          <g
              inkscape:groupmode="layer"
              id="layer3"
              inkscape:label="Shirt"
              style="display:inline"
              transform="translate(-73.828052,-54.594358)">
            <path
                style="fill:${this.properties.colorShirt};fill-opacity:1;stroke:none;stroke-width:0.2662065px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
                d="m 88.210119,84.13992 c -6.457678,3.370482 -6.747431,10.987622 -9.118825,19.85958 -3.09086,11.55469 -3.842813,23.10962 -5.263242,34.66431 l 9.52138,-0.034 c 0.701583,-7.40655 1.670262,-14.67783 3.307292,-22.01674 0.824082,-4.62205 2.583934,-10.6961 3.875733,-15.45343 0.496559,6.55979 2.662611,18.36972 2.739369,26.74926 l 14.437874,0.20297 13.89786,-0.20297 c 0.2185,-8.52128 2.24281,-20.18947 2.73937,-26.74926 1.2918,4.75733 3.05165,10.83138 3.87573,15.45343 1.63703,7.33891 2.60571,14.61019 3.30729,22.01674 l 9.52139,0.034 c -1.42043,-11.55469 -2.17239,-23.10962 -5.26325,-34.66431 -2.37139,-8.871958 -2.71909,-16.380327 -9.11882,-19.85958 -3.18641,-1.732312 -8.21227,-1.402256 -11.71712,-1.291596 l -7.5122,3.13859 -7.512719,-3.13859 c -3.905925,0.0914 -8.351497,-0.465033 -11.717112,1.291596 z"
                id="path3754"
                inkscape:connector-curvature="0"
                sodipodi:nodetypes="scccccccccccccscccs" />
          </g>
          <g
              inkscape:groupmode="layer"
              id="layer13"
              inkscape:label="CapeFront"
              sodipodi:insensitive="true"
              style="display:inline"
              transform="translate(-73.828052,-54.594358)">
            <path
                style="display:inline;fill:${this.properties.colorCape};fill-opacity:1;stroke:none;stroke-width:0.18022132;stroke-opacity:1"
                d="m 114.95215,82.848324 c 4.10616,-0.504911 7.81141,-0.408466 11.71712,1.291596 -15.81704,3.00461 -19.22932,1.846994 -19.22932,1.846994 z"
                id="rect853"
                inkscape:connector-curvature="0"
                sodipodi:nodetypes="cccc" />
            <path
                sodipodi:nodetypes="cccc"
                inkscape:connector-curvature="0"
                id="path858"
                d="m 99.927231,82.848324 c -4.106136,-0.504911 -7.811423,-0.408466 -11.717112,1.291596 15.816971,3.00461 19.229831,1.846994 19.229831,1.846994 z"
                style="display:inline;fill:${this.properties.colorCape};fill-opacity:1;stroke:none;stroke-width:0.18022132;stroke-opacity:1" />
          </g>
          <g
              inkscape:groupmode="layer"
              id="layer9"
              inkscape:label="Logo"
              style="display:inline"
              transform="translate(-73.828052,-54.594358)">
            <g
                inkscape:groupmode="layer"
                id="layer10"
                inkscape:label="Base"
                style="display:inline">
              <path
                  inkscape:connector-curvature="0"
                  id="path4616"
                  d="M 107.44042,90.28666 97.139694,95.523888 V 107.6271 l 10.300726,5.95956 10.29927,-5.95956 V 95.523888 Z"
                  style="display:inline;fill:${this.properties.colorLogo};fill-opacity:1;stroke:none;stroke-width:0.74192154;stroke-opacity:1" />
              <path
                  style="display:inline;fill:${this.properties.colorShirt};fill-opacity:1;stroke:none;stroke-width:0.64913452;stroke-opacity:1"
                  d="m 107.44042,91.78666 -9.050728,4.562918 V 106.8945 l 9.050728,5.19216 9.04927,-5.19216 V 96.349578 Z"
                  id="path4619"
                  inkscape:connector-curvature="0" />
            </g>
            <g
                inkscape:groupmode="layer"
                id="layer15"
                inkscape:label="Text as Object">
              <g
                  aria-label="PnP"
                  style="font-style:normal;font-weight:normal;font-size:10.58333302px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;display:inline;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
                  id="text872">
                <path
                    d="m 100.94121,102.93539 v 2.21244 h -1.446599 v -6.42235 h 2.266179 q 2.42742,0 2.42742,2.04673 0,0.96738 -0.69867,1.56752 -0.69418,0.59566 -1.85863,0.59566 z m 0,-3.099211 v 2.001941 h 0.56878 q 1.15549,0 1.15549,-1.01217 0,-0.989771 -1.15549,-0.989771 z"
                    style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:9.17222214px;font-family:'Segoe UI';-inkscape-font-specification:'Segoe UI Bold';fill:${this.properties.colorLogo};stroke-width:0.26458332"
                    id="path876"
                    inkscape:connector-curvature="0" />
                <path
                    d="m 109.4282,105.14783 h -1.41077 v -2.54834 q 0,-1.06591 -0.76136,-1.06591 -0.36725,0 -0.60462,0.28215 -0.23736,0.28215 -0.23736,0.71658 v 2.61552 h -1.41525 v -4.58611 h 1.41525 v 0.72553 h 0.0179 q 0.50608,-0.8375 1.47347,-0.8375 1.52273,0 1.52273,1.88998 z"
                    style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:9.17222214px;font-family:'Segoe UI';-inkscape-font-specification:'Segoe UI Bold';fill:${this.properties.colorLogo};stroke-width:0.26458332"
                    id="path878"
                    inkscape:connector-curvature="0" />
                <path
                    d="m 112.13777,102.93539 v 2.21244 h -1.4466 v -6.42235 h 2.26618 q 2.42742,0 2.42742,2.04673 0,0.96738 -0.69867,1.56752 -0.69418,0.59566 -1.85863,0.59566 z m 0,-3.099211 v 2.001941 h 0.56878 q 1.15549,0 1.15549,-1.01217 0,-0.989771 -1.15549,-0.989771 z"
                    style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:9.17222214px;font-family:'Segoe UI';-inkscape-font-specification:'Segoe UI Bold';fill:${this.properties.colorLogo};stroke-width:0.26458332"
                    id="path880"
                    inkscape:connector-curvature="0" />
              </g>
            </g>
            <g
                inkscape:groupmode="layer"
                id="layer14"
                inkscape:label="Font"
                style="display:none">
              <text
                  xml:space="preserve"
                  style="font-style:normal;font-weight:normal;font-size:10.58333302px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;display:inline;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
                  x="98.760117"
                  y="105.14783"
                  id="text4626"><tspan
                    sodipodi:role="line"
                    id="tspan4624"
                    x="98.760117"
                    y="105.14783"
                    style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:9.17222214px;font-family:'Segoe UI';-inkscape-font-specification:'Segoe UI Bold';fill:#ffffff;stroke-width:0.26458332">PnP</tspan></text>
            </g>
          </g>
          <g
              inkscape:groupmode="layer"
              id="layer4"
              inkscape:label="Belt"
              style="display:inline"
              transform="translate(-73.828052,-54.594358)">
            <rect
                style="fill:${this.properties.colorBelt};fill-opacity:1;stroke:none;stroke-width:0.25898856;stroke-opacity:1"
                id="rect4567"
                width="29.77"
                height="4.6772165"
                x="92.605003"
                y="127.43362"
                ry="0.80319941" />
            <path
                style="display:inline;fill:${this.properties.colorBuckle};fill-opacity:1;stroke:none;stroke-width:0.26966235;stroke-opacity:1"
                d="m 107.43996,125.41306 -3.54139,2.01245 v 4.65079 l 3.54139,2.28997 3.54087,-2.28997 v -4.65079 z"
                id="rect4575"
                inkscape:connector-curvature="0" />
          </g>
          <g
              inkscape:groupmode="layer"
              id="layer12"
              inkscape:label="Hair"
              transform="translate(-73.828052,-54.594358)">
            <path
                style="fill:${this.properties.colorHair};fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
                d="m 97.210752,66.080176 c 0.09515,0.173788 1.072702,-0.0795 1.299292,-0.661458 0,0 -0.01241,-1.679638 0.259858,-2.456846 0.222434,-0.634965 0.473239,-1.424587 1.086681,-1.700893 0.508757,-0.229152 1.653647,0.259857 1.653647,0.259857 2.54347,0.393723 4.3546,0.574834 7.91388,-0.02363 0,0 0.85196,-0.49374 1.32291,-0.496095 0.46084,-0.0023 0.85287,0.358063 1.29929,0.47247 1.19124,0.305292 2.65961,-0.17198 3.64614,0.562212 0.27425,0.204103 0.44073,0.926066 0.44073,0.926066 -0.0158,0.874246 0.38167,2.584533 0.38167,2.584533 0.26774,0.425224 0.98621,1.053091 1.29563,0.675512 0.80803,-0.986031 0.18111,-3.669519 -0.11812,-5.504279 -1.6064,-3.244296 -3.38436,-3.996689 -5.74051,-4.84282 -0.65963,-0.236884 -1.41878,-0.233489 -2.10249,0.02362 -0.88195,-0.842572 -2.36864,-1.028411 -3.60494,-1.115032 -1.58278,-0.267731 -3.51991,-0.228357 -4.016,-0.02362 -2.267859,0.456722 -4.299484,1.768615 -4.890072,5.201899 -0.433096,1.708767 -0.733901,2.85057 -0.623657,4.275855 -1.1e-5,0.614216 0.141719,1.252056 0.496061,1.842649 z"
                id="path4646"
                inkscape:connector-curvature="0"
                sodipodi:nodetypes="ccaaccaaascscacccccc" />
          </g>
        </svg>
      </div>`;
  }

  private resetToDefault(): void {
    this.properties.colorSkin = '#ffb900';
    this.properties.colorHair = '#262626';
    this.properties.colorPants = '#d83b01';
    this.properties.colorBelt = '#ffc929';
    this.properties.colorBuckle = '#ffb900';
    this.properties.colorCape = '#003c6c';
    this.properties.colorDiaper = '#262626';
    this.properties.colorShoes = '#0078d7';
    this.properties.colorShirt = '#0078d7';
    this.properties.colorLogo = '#ffffff';
  }

  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.SizeGroupName,
              groupFields: [
                PropertyFieldSpinButton('height', {
                  label: strings.HeightFieldLabel,
                  initialValue: this.properties.height,
                  onPropertyChange: this.onPropertyPaneFieldChanged,
                  properties: this.properties,
                  suffix: " mm",
                  min: 25,
                  max: 150,
                  step: 5,
                  decimalPlaces: 2,
                  key: 'height'
                })
              ]
            },
            {
              groupName: strings.ColorGroupName,
              groupFields: [
                PropertyFieldColorPicker('colorHair', {
                  label: strings.HairFieldLabel,
                  selectedColor: this.properties.colorHair,
                  onPropertyChange: this.onPropertyPaneFieldChanged,
                  properties: this.properties,
                  key: 'colorHair'
                }),
                PropertyFieldColorPicker('colorSkin', {
                  label: strings.SkinFieldLabel,
                  selectedColor: this.properties.colorSkin,
                  onPropertyChange: this.onPropertyPaneFieldChanged,
                  properties: this.properties,
                  key: 'colorSkin'
                }),
                PropertyFieldColorPicker('colorCape', {
                  label: strings.CapeFieldLabel,
                  selectedColor: this.properties.colorCape,
                  onPropertyChange: this.onPropertyPaneFieldChanged,
                  properties: this.properties,
                  key: 'colorCape'
                }),
                PropertyFieldColorPicker('colorShirt', {
                  label: strings.ShirtFieldLabel,
                  selectedColor: this.properties.colorShirt,
                  onPropertyChange: this.onPropertyPaneFieldChanged,
                  properties: this.properties,
                  key: 'colorShirt'
                }),
                PropertyFieldColorPicker('colorLogo', {
                  label: strings.LogoFieldLabel,
                  selectedColor: this.properties.colorLogo,
                  onPropertyChange: this.onPropertyPaneFieldChanged,
                  properties: this.properties,
                  key: 'colorLogo'
                }),
                PropertyFieldColorPicker('colorBuckle', {
                  label: strings.BuckleFieldLabel,
                  selectedColor: this.properties.colorBuckle,
                  onPropertyChange: this.onPropertyPaneFieldChanged,
                  properties: this.properties,
                  key: 'colorBuckle'
                }),
                PropertyFieldColorPicker('colorBelt', {
                  label: strings.BeltFieldLabel,
                  selectedColor: this.properties.colorBelt,
                  onPropertyChange: this.onPropertyPaneFieldChanged,
                  properties: this.properties,
                  key: 'colorBelt'
                }),
                PropertyFieldColorPicker('colorDiaper', {
                  label: strings.DiaperFieldLabel,
                  selectedColor: this.properties.colorDiaper,
                  onPropertyChange: this.onPropertyPaneFieldChanged,
                  properties: this.properties,
                  key: 'colorDiaper'
                }),
                PropertyFieldColorPicker('colorPants', {
                  label: strings.PantsFieldLabel,
                  selectedColor: this.properties.colorPants,
                  onPropertyChange: this.onPropertyPaneFieldChanged,
                  properties: this.properties,
                  key: 'colorPants'
                }),
                PropertyFieldColorPicker('colorShoes', {
                  label: strings.ShoesFieldLabel,
                  selectedColor: this.properties.colorShoes,
                  onPropertyChange: this.onPropertyPaneFieldChanged,
                  properties: this.properties,
                  key: 'colorShoes'
                }),
                PropertyPaneButton('reset',{
                  text: strings.ResetButtonLabel,
                  buttonType: PropertyPaneButtonType.Command,
                  icon: 'Warning',
                  onClick: this.resetToDefault.bind(this)
                })
              ]
            }
          ]
        }
      ]
    };
  }
}