///
/// Copyright © 2016-2021 The Thingsboard Authors
///
/// Licensed under the Apache License, Version 2.0 (the "License");
/// you may not use this file except in compliance with the License.
/// You may obtain a copy of the License at
///
///     http://www.apache.org/licenses/LICENSE-2.0
///
/// Unless required by applicable law or agreed to in writing, software
/// distributed under the License is distributed on an "AS IS" BASIS,
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
/// See the License for the specific language governing permissions and
/// limitations under the License.
///

import { JsonSettingsSchema } from '@shared/models/widget.models';
import { GaugeType } from '@home/components/widget/lib/canvas-digital-gauge';
import { AnimationRule } from '@home/components/widget/lib/analogue-gauge.models';
import { FontSettings } from '@home/components/widget/lib/settings.models';

export interface AttributeSourceProperty {
  valueSource: string;
  entityAlias?: string;
  attribute?: string;
  value?: number;
}

export interface FixedLevelColors {
  from?: AttributeSourceProperty;
  to?: AttributeSourceProperty;
  color: string;
}

export interface ColorLevelSetting {
  value: number;
  color: string;
}

export type colorLevel = Array<string | ColorLevelSetting>;

export type attributesGaugeType = 'levelColors' | 'ticks';

export interface DigitalGaugeSettings {
  minValue?: number;
  maxValue?: number;
  gaugeType?: GaugeType;
  donutStartAngle?: number;
  neonGlowBrightness?: number;
  dashThickness?: number;
  roundedLineCap?: boolean;
  title?: string;
  showTitle?: boolean;
  unitTitle?: string;
  showUnitTitle?: boolean;
  showTimestamp?: boolean;
  timestampFormat?: string;
  showValue?: boolean;
  showMinMax?: boolean;
  gaugeWidthScale?: number;
  defaultColor?: string;
  gaugeColor?: string;
  useFixedLevelColor?: boolean;
  levelColors?: colorLevel;
  fixedLevelColors?: FixedLevelColors[];
  animation?: boolean;
  animationDuration?: number;
  animationRule?: AnimationRule;
  titleFont?: FontSettings;
  labelFont?: FontSettings;
  valueFont?: FontSettings;
  minMaxFont?: FontSettings;
  decimals?: number;
  units?: string;
  hideValue?: boolean;
  hideMinMax?: boolean;
  showTicks?: boolean;
  ticksValue?: AttributeSourceProperty[];
  ticks?: number[];
  colorTicks?: string;
  tickWidth?: number;
}

export const digitalGaugeSettingsSchema: JsonSettingsSchema = {
  schema: {
    type: 'object',
    title: 'Settings',
    properties: {
      minValue: {
        title: 'Minimum value',
        type: 'number',
        default: 0
      },
      maxValue: {
        title: 'Maximum value',
        type: 'number',
        default: 100
      },
      gaugeType: {
        title: 'Gauge type',
        type: 'string',
        default: 'arc'
      },
      donutStartAngle: {
        title: 'Angle to start from when in donut mode',
        type: 'number',
        default: 90
      },
      neonGlowBrightness: {
        title: 'Neon glow effect brightness, (0-100), 0 - disable effect',
        type: 'number',
        default: 0
      },
      dashThickness: {
        title: 'Thickness of the stripes, 0 - no stripes',
        type: 'number',
        default: 0
      },
      roundedLineCap: {
        title: 'Display rounded line cap',
        type: 'boolean',
        default: false
      },
      title: {
        title: 'Gauge title',
        type: 'string',
        default: null
      },
      showTitle: {
        title: 'Show gauge title',
        type: 'boolean',
        default: false
      },
      unitTitle: {
        title: 'Unit title',
        type: 'string',
        default: null
      },
      showUnitTitle: {
        title: 'Show unit title',
        type: 'boolean',
        default: false
      },
      showTimestamp: {
        title: 'Show value timestamp',
        type: 'boolean',
        default: false
      },
      timestampFormat: {
        title: 'Timestamp format',
        type: 'string',
        default: 'yyyy-MM-dd HH:mm:ss'
      },
      showValue: {
        title: 'Show value text',
        type: 'boolean',
        default: true
      },
      showMinMax: {
        title: 'Show min and max values',
        type: 'boolean',
        default: true
      },
      gaugeWidthScale: {
        title: 'Width of the gauge element',
        type: 'number',
        default: 0.75
      },
      defaultColor: {
        title: 'Default color',
        type: 'string',
        default: null
      },
      gaugeColor: {
        title: 'Background color of the gauge element',
        type: 'string',
        default: null
      },
      useFixedLevelColor: {
        title: 'Use precise value for the color indicator',
        type: 'boolean',
        default: false
      },
      levelColors: {
        title: 'Colors of indicator, from lower to upper',
        type: 'array',
        items: {
          title: 'Color',
          type: 'string'
        }
      },
      fixedLevelColors: {
        title: 'The colors for the indicator using boundary values',
        type: 'array',
        items: {
          title: 'levelColor',
          type: 'object',
          properties: {
            from: {
              title: 'From',
              type: 'object',
              properties: {
                valueSource: {
                  title: '[From] Value source',
                  type: 'string',
                  default: 'predefinedValue'
                },
                entityAlias: {
                  title: '[From] Source entity alias',
                  type: 'string'
                },
                attribute: {
                  title: '[From] Source entity attribute',
                  type: 'string'
                },
                value: {
                  title: '[From] Value (if predefined value is selected)',
                  type: 'number'
                }
              }
            },
            to: {
              title: 'To',
              type: 'object',
              properties: {
                valueSource: {
                  title: '[To] Value source',
                  type: 'string',
                  default: 'predefinedValue'
                },
                entityAlias: {
                  title: '[To] Source entity alias',
                  type: 'string'
                },
                attribute: {
                  title: '[To] Source entity attribute',
                  type: 'string'
                },
                value: {
                  title: '[To] Value (if predefined value is selected)',
                  type: 'number'
                }
              }
            },
            color: {
              title: 'Color',
              type: 'string'
            }
          }
        }
      },
      showTicks: {
        title: 'Show ticks',
        type: 'boolean',
        default: false
      },
      tickWidth: {
        title: 'Width ticks',
        type: 'number',
        default: 4
      },
      colorTicks: {
        title: 'Color ticks',
        type: 'string',
        default: '#666'
      },
      ticksValue: {
        title: 'The ticks predefined value',
        type: 'array',
        items: {
          title: 'tickValue',
          type: 'object',
          properties: {
            valueSource: {
              title: 'Value source',
              type: 'string',
              default: 'predefinedValue'
            },
            entityAlias: {
              title: 'Source entity alias',
              type: 'string'
            },
            attribute: {
              title: 'Source entity attribute',
              type: 'string'
            },
            value: {
              title: 'Value (if predefined value is selected)',
              type: 'number'
            }
          }
        }
      },
      animation: {
        title: 'Enable animation',
        type: 'boolean',
        default: true
      },
      animationDuration: {
        title: 'Animation duration',
        type: 'number',
        default: 500
      },
      animationRule: {
        title: 'Animation rule',
        type: 'string',
        default: 'linear'
      },
      titleFont: {
        title: 'Gauge title font',
        type: 'object',
        properties: {
          family: {
            title: 'Font family',
            type: 'string',
            default: 'Roboto'
          },
          size: {
            title: 'Size',
            type: 'number',
            default: 12
          },
          style: {
            title: 'Style',
            type: 'string',
            default: 'normal'
          },
          weight: {
            title: 'Weight',
            type: 'string',
            default: '500'
          },
          color: {
            title: 'color',
            type: 'string',
            default: null
          }
        }
      },
      labelFont: {
        title: 'Font of label showing under value',
        type: 'object',
        properties: {
          family: {
            title: 'Font family',
            type: 'string',
            default: 'Roboto'
          },
          size: {
            title: 'Size',
            type: 'number',
            default: 8
          },
          style: {
            title: 'Style',
            type: 'string',
            default: 'normal'
          },
          weight: {
            title: 'Weight',
            type: 'string',
            default: '500'
          },
          color: {
            title: 'color',
            type: 'string',
            default: null
          }
        }
      },
      valueFont: {
        title: 'Font of label showing current value',
        type: 'object',
        properties: {
          family: {
            title: 'Font family',
            type: 'string',
            default: 'Roboto'
          },
          size: {
            title: 'Size',
            type: 'number',
            default: 18
          },
          style: {
            title: 'Style',
            type: 'string',
            default: 'normal'
          },
          weight: {
            title: 'Weight',
            type: 'string',
            default: '500'
          },
          color: {
            title: 'color',
            type: 'string',
            default: null
          }
        }
      },
      minMaxFont: {
        title: 'Font of minimum and maximum labels',
        type: 'object',
        properties: {
          family: {
            title: 'Font family',
            type: 'string',
            default: 'Roboto'
          },
          size: {
            title: 'Size',
            type: 'number',
            default: 10
          },
          style: {
            title: 'Style',
            type: 'string',
            default: 'normal'
          },
          weight: {
            title: 'Weight',
            type: 'string',
            default: '500'
          },
          color: {
            title: 'color',
            type: 'string',
            default: null
          }
        }
      }
    }
  },
  form: [
    'minValue',
    'maxValue',
    {
      key: 'gaugeType',
      type: 'rc-select',
      multiple: false,
      items: [
        {
          value: 'arc',
          label: 'Arc'
        },
        {
          value: 'donut',
          label: 'Donut'
        },
        {
          value: 'horizontalBar',
          label: 'Horizontal bar'
        },
        {
          value: 'verticalBar',
          label: 'Vertical bar'
        }
      ]
    },
    'donutStartAngle',
    'neonGlowBrightness',
    'dashThickness',
    'roundedLineCap',
    'title',
    'showTitle',
    'unitTitle',
    'showUnitTitle',
    'showTimestamp',
    'timestampFormat',
    'showValue',
    'showMinMax',
    'gaugeWidthScale',
    {
      key: 'defaultColor',
      type: 'color'
    },
    {
      key: 'gaugeColor',
      type: 'color'
    },
    'useFixedLevelColor',
    {
      key: 'levelColors',
      condition: 'model.useFixedLevelColor !== true',
      items: [
        {
          key: 'levelColors[]',
          type: 'color'
        }
      ]
    },
    {
      key: 'fixedLevelColors',
      condition: 'model.useFixedLevelColor === true',
      items: [
        {
          key: 'fixedLevelColors[].from.valueSource',
          type: 'rc-select',
          multiple: false,
          items: [
            {
              value: 'predefinedValue',
              label: 'Predefined value (Default)'
            },
            {
              value: 'entityAttribute',
              label: 'Value taken from entity attribute'
            }
          ]
        },
        'fixedLevelColors[].from.value',
        'fixedLevelColors[].from.entityAlias',
        'fixedLevelColors[].from.attribute',
        {
          key: 'fixedLevelColors[].to.valueSource',
          type: 'rc-select',
          multiple: false,
          items: [
            {
              value: 'predefinedValue',
              label: 'Predefined value (Default)'
            },
            {
              value: 'entityAttribute',
              label: 'Value taken from entity attribute'
            }
          ]
        },
        'fixedLevelColors[].to.value',
        'fixedLevelColors[].to.entityAlias',
        'fixedLevelColors[].to.attribute',
        {
          key: 'fixedLevelColors[].color',
          type: 'color'
        }
      ]
    },
    'showTicks',
    {
      key: 'tickWidth',
      condition: 'model.showTicks === true'
    },
    {
      key: 'colorTicks',
      condition: 'model.showTicks === true',
      type: 'color'
    },
    {
      key: 'ticksValue',
      condition: 'model.showTicks === true',
      items: [
        {
          key: 'ticksValue[].valueSource',
          type: 'rc-select',
          multiple: false,
          items: [
            {
              value: 'predefinedValue',
              label: 'Predefined value (Default)'
            },
            {
              value: 'entityAttribute',
              label: 'Value taken from entity attribute'
            }
          ]
        },
        'ticksValue[].value',
        'ticksValue[].entityAlias',
        'ticksValue[].attribute'
      ]
    },
    'animation',
    'animationDuration',
    {
      key: 'animationRule',
      type: 'rc-select',
      multiple: false,
      items: [
        {
          value: 'linear',
          label: 'Linear'
        },
        {
          value: 'quad',
          label: 'Quad'
        },
        {
          value: 'quint',
          label: 'Quint'
        },
        {
          value: 'cycle',
          label: 'Cycle'
        },
        {
          value: 'bounce',
          label: 'Bounce'
        },
        {
          value: 'elastic',
          label: 'Elastic'
        },
        {
          value: 'dequad',
          label: 'Dequad'
        },
        {
          value: 'dequint',
          label: 'Dequint'
        },
        {
          value: 'decycle',
          label: 'Decycle'
        },
        {
          value: 'debounce',
          label: 'Debounce'
        },
        {
          value: 'delastic',
          label: 'Delastic'
        }
      ]
    },
    {
      key: 'titleFont',
      items: [
        'titleFont.family',
        'titleFont.size',
        {
          key: 'titleFont.style',
          type: 'rc-select',
          multiple: false,
          items: [
            {
              value: 'normal',
              label: 'Normal'
            },
            {
              value: 'italic',
              label: 'Italic'
            },
            {
              value: 'oblique',
              label: 'Oblique'
            }
          ]
        },
        {
          key: 'titleFont.weight',
          type: 'rc-select',
          multiple: false,
          items: [
            {
              value: 'normal',
              label: 'Normal'
            },
            {
              value: 'bold',
              label: 'Bold'
            },
            {
              value: 'bolder',
              label: 'Bolder'
            },
            {
              value: 'lighter',
              label: 'Lighter'
            },
            {
              value: '100',
              label: '100'
            },
            {
              value: '200',
              label: '200'
            },
            {
              value: '300',
              label: '300'
            },
            {
              value: '400',
              label: '400'
            },
            {
              value: '500',
              label: '500'
            },
            {
              value: '600',
              label: '600'
            },
            {
              value: '700',
              label: '700'
            },
            {
              value: '800',
              label: '800'
            },
            {
              value: '900',
              label: '900'
            }
          ]
        },
        {
          key: 'titleFont.color',
          type: 'color'
        }
      ]
    },
    {
      key: 'labelFont',
      items: [
        'labelFont.family',
        'labelFont.size',
        {
          key: 'labelFont.style',
          type: 'rc-select',
          multiple: false,
          items: [
            {
              value: 'normal',
              label: 'Normal'
            },
            {
              value: 'italic',
              label: 'Italic'
            },
            {
              value: 'oblique',
              label: 'Oblique'
            }
          ]
        },
        {
          key: 'labelFont.weight',
          type: 'rc-select',
          multiple: false,
          items: [
            {
              value: 'normal',
              label: 'Normal'
            },
            {
              value: 'bold',
              label: 'Bold'
            },
            {
              value: 'bolder',
              label: 'Bolder'
            },
            {
              value: 'lighter',
              label: 'Lighter'
            },
            {
              value: '100',
              label: '100'
            },
            {
              value: '200',
              label: '200'
            },
            {
              value: '300',
              label: '300'
            },
            {
              value: '400',
              label: '400'
            },
            {
              value: '500',
              label: '500'
            },
            {
              value: '600',
              label: '600'
            },
            {
              value: '700',
              label: '700'
            },
            {
              value: '800',
              label: '800'
            },
            {
              value: '900',
              label: '900'
            }
          ]
        },
        {
          key: 'labelFont.color',
          type: 'color'
        }
      ]
    },
    {
      key: 'valueFont',
      items: [
        'valueFont.family',
        'valueFont.size',
        {
          key: 'valueFont.style',
          type: 'rc-select',
          multiple: false,
          items: [
            {
              value: 'normal',
              label: 'Normal'
            },
            {
              value: 'italic',
              label: 'Italic'
            },
            {
              value: 'oblique',
              label: 'Oblique'
            }
          ]
        },
        {
          key: 'valueFont.weight',
          type: 'rc-select',
          multiple: false,
          items: [
            {
              value: 'normal',
              label: 'Normal'
            },
            {
              value: 'bold',
              label: 'Bold'
            },
            {
              value: 'bolder',
              label: 'Bolder'
            },
            {
              value: 'lighter',
              label: 'Lighter'
            },
            {
              value: '100',
              label: '100'
            },
            {
              value: '200',
              label: '200'
            },
            {
              value: '300',
              label: '300'
            },
            {
              value: '400',
              label: '400'
            },
            {
              value: '500',
              label: '500'
            },
            {
              value: '600',
              label: '600'
            },
            {
              value: '700',
              label: '700'
            },
            {
              value: '800',
              label: '800'
            },
            {
              value: '900',
              label: '900'
            }
          ]
        },
        {
          key: 'valueFont.color',
          type: 'color'
        }
      ]
    },
    {
      key: 'minMaxFont',
      items: [
        'minMaxFont.family',
        'minMaxFont.size',
        {
          key: 'minMaxFont.style',
          type: 'rc-select',
          multiple: false,
          items: [
            {
              value: 'normal',
              label: 'Normal'
            },
            {
              value: 'italic',
              label: 'Italic'
            },
            {
              value: 'oblique',
              label: 'Oblique'
            }
          ]
        },
        {
          key: 'minMaxFont.weight',
          type: 'rc-select',
          multiple: false,
          items: [
            {
              value: 'normal',
              label: 'Normal'
            },
            {
              value: 'bold',
              label: 'Bold'
            },
            {
              value: 'bolder',
              label: 'Bolder'
            },
            {
              value: 'lighter',
              label: 'Lighter'
            },
            {
              value: '100',
              label: '100'
            },
            {
              value: '200',
              label: '200'
            },
            {
              value: '300',
              label: '300'
            },
            {
              value: '400',
              label: '400'
            },
            {
              value: '500',
              label: '500'
            },
            {
              value: '600',
              label: '600'
            },
            {
              value: '700',
              label: '700'
            },
            {
              value: '800',
              label: '800'
            },
            {
              value: '900',
              label: '900'
            }
          ]
        },
        {
          key: 'minMaxFont.color',
          type: 'color'
        }
      ]
    }
  ]
};