/*
 * Copyright (c) 2023-2023 Huawei Device Co., Ltd.
 * 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 curves from '@ohos.curves';

const START_TIME = 250;
const END_TIME = 200;
const BORDER_RADIUS = 12;
const ZINDEX_NUM = 9;


export enum MarginType {
  DEFAULT_MARGIN = 0,
  FIT_MARGIN = 1,
}

export interface PromptOptions {
  icon?: ResourceStr,
  tip?: ResourceStr,
  marginType: MarginType,
  actionText?: ResourceStr,
  marginTop: Dimension,
  isShown?: boolean
}

@Component
export struct ExceptionPrompt {
  @Prop options: PromptOptions
  touchBackgroundColor: Resource = $r('sys.color.ohos_id_color_sub_background_transparent')
  onTipClick: () => void = () => {
    // Click the text on the left to change into the connecting state
  }
  onActionTextClick: () => void = () => {
    // Click Set Network to open the Set network pop-up interface
  }

  @Builder
  TextBuilder() {
    Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign
      .Center }) {
      Row() {
        Image(this.options.icon ?? $r('sys.media.ohos_ic_public_fail'))
          .width("24vp")
          .height('24vp')
          .fillColor($r('sys.color.ohos_id_color_warning'))
        Text(this.options.tip)
          .fontSize($r('sys.float.ohos_id_text_size_body1'))
          .fontColor($r('sys.color.ohos_id_color_warning'))
          .textOverflow({ overflow: TextOverflow.Ellipsis })
          .maxLines(2)
          .lineHeight(24)
          .margin({
            left: $r('sys.float.ohos_id_dialog_margin_end'),
            right: $r('sys.float.ohos_id_dialog_margin_end')
          })
      }
      .padding({ right: $r('sys.float.ohos_id_default_padding_end') })
      .width('100%')
      .onClick(() => {
        this.onTipClick() //Click the callback of the prompt text
      })

      if (this.options.actionText) {
        Button({ stateEffect: true, type: ButtonType.Normal }) {
          Row() {
            Text(this.options.actionText)
              .fontSize($r('sys.float.ohos_id_text_size_body2'))
              .fontColor($r('sys.color.ohos_id_color_text_secondary'))
              .maxLines(1)
              .padding(0)
              .margin({ right: $r('sys.float.ohos_id_text_paragraph_margin_s') })
              .textAlign(TextAlign.End)
            Image($r('sys.media.ohos_ic_public_arrow_right'))
              .width('12vp')
              .height('24vp')
              .fillColor($r('sys.color.ohos_id_color_tertiary'))
          }
        }
        .backgroundColor(this.touchBackgroundColor)
        .width(this.options.actionText ? 144 : 0)
        .height(24)
        .borderRadius($r('sys.float.ohos_id_corner_radius_subtab'))
        .padding({
          right: $r('sys.float.ohos_id_elements_margin_vertical_l'),
          left: $r('sys.float.ohos_id_elements_margin_vertical_l')
        })
        .onTouch((event) => {

          if (event.type === TouchType.Down) {
            this.touchBackgroundColor = $r('sys.color.ohos_id_color_click_effect')
            this.onActionTextClick() //Click the icon button on the right for the callback
          } else if (event.type === TouchType.Up) {
            this.touchBackgroundColor = $r('sys.color.ohos_id_color_sub_background_transparent')
          }
        })

      }
    }
    .padding({
      left: $r('sys.float.ohos_id_notification_margin_start'),
      right: $r('sys.float.ohos_id_text_paragraph_margin_s'),
      top: $r('sys.float.ohos_id_default_padding_start'),
      bottom: $r('sys.float.ohos_id_default_padding_end')
    })
  }

  build() {
    Row() {
      Column() {
        Column() {
          this.TextBuilder()
        }
        .width('100%')
        .borderRadius(BORDER_RADIUS)
        .backgroundColor('#fdd9d9')
        .zIndex(ZINDEX_NUM)
      }
      .padding(this.options.marginType === MarginType.DEFAULT_MARGIN ? {
                                                                         left: $r('sys.float.ohos_id_card_margin_start'),
                                                                         right: $r('sys.float.ohos_id_card_margin_end')
                                                                       } : {
                                                                             left: $r('sys.float.ohos_id_max_padding_start'),
                                                                             right: $r('sys.float.ohos_id_max_padding_end')
                                                                           })
      .transition(
        TransitionEffect.OPACITY.animation({
          curve: curves.cubicBezierCurve(0.33, 0, 0.67, 1),
          duration: this.options.isShown ? START_TIME : END_TIME
        })
      )
      .visibility(this.options.isShown ? Visibility.Visible : Visibility.None)
    }
    .width('100%')
    .position({ y: this.options.marginTop })
    .zIndex(ZINDEX_NUM)
  }
}