'use strict';
(function () {
  document.querySelector('.bs-message').addEventListener('click', function () {
    Swal.fire('Any fool can use a computer');
  });

  document.querySelector('.bs-tit-txt').addEventListener('click', function () {
    Swal.fire('The Internet?', 'That thing is still around?', 'question');
  });

  document.querySelector('.bs-error-icon').addEventListener('click', function () {
    Swal.fire({
      icon: 'error',
      title: 'Oops...',
      text: 'Something went wrong!',
      footer: '<a href>Why do I have this issue?</a>'
    });
  });

  document.querySelector('.bs-long-content').addEventListener('click', function () {
    Swal.fire({
      imageUrl: 'https://placeholder.pics/svg/300x1500',
      imageHeight: 1500,
      imageAlt: 'A tall image'
    });
  });

  document.querySelector('.bs-cust-html').addEventListener('click', function () {
    Swal.fire({
      title: '<strong>HTML <u>example</u></strong>',
      icon: 'info',
      html: 'You can use <b>bold text</b>, ' + '<a href="//sweetalert2.github.io">links</a> ' + 'and other HTML tags',
      showCloseButton: true,
      showCancelButton: true,
      focusConfirm: false,
      confirmButtonText: '<i class="fa fa-thumbs-up"></i> Great!',
      confirmButtonAriaLabel: 'Thumbs up, great!',
      cancelButtonText: '<i class="fa fa-thumbs-down"></i>',
      cancelButtonAriaLabel: 'Thumbs down'
    });
  });

  document.querySelector('.bs-tre-button').addEventListener('click', function () {
    Swal.fire({
      title: 'Do you want to save the changes?',
      showDenyButton: true,
      showCancelButton: true,
      confirmButtonText: `Save`,
      denyButtonText: `Don't save`
    }).then((result) => {
      if (result.isConfirmed) {
        Swal.fire('Saved!', '', 'success');
      } else if (result.isDenied) {
        Swal.fire('Changes are not saved', '', 'info');
      }
    });
  });

  document.querySelector('.bs-cust-position').addEventListener('click', function () {
    Swal.fire({
      position: 'top-end',
      icon: 'success',
      title: 'Your work has been saved',
      showConfirmButton: false,
      timer: 1500
    });
  });

  document.querySelector('.bs-cust-anim').addEventListener('click', function () {
    Swal.fire({
      title: 'Custom animation with Animate.css',
      showClass: {
        popup: 'animate__animated animate__fadeInDown'
      },
      hideClass: {
        popup: 'animate__animated animate__fadeOutUp'
      }
    });
  });

  document.querySelector('.bs-pass-para').addEventListener('click', function () {
    const swalWithBootstrapButtons = Swal.mixin({
      customClass: {
        confirmButton: 'btn btn-success',
        cancelButton: 'btn btn-danger'
      },
      buttonsStyling: false
    });
    swalWithBootstrapButtons
      .fire({
        title: 'Are you sure?',
        text: "You won't be able to revert this!",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Yes, delete it!',
        cancelButtonText: 'No, cancel!',
        reverseButtons: true
      })
      .then((result) => {
        if (result.isConfirmed) {
          swalWithBootstrapButtons.fire('Deleted!', 'Your file has been deleted.', 'success');
        } else if (result.dismiss === Swal.DismissReason.cancel) {
          swalWithBootstrapButtons.fire('Cancelled', 'Your imaginary file is safe :)', 'error');
        }
      });
  });

  document.querySelector('.bs-cust-img').addEventListener('click', function () {
    Swal.fire({
      title: 'Sweet!',
      text: 'Modal with a custom image.',
      imageUrl: 'https://unsplash.it/400/200',
      imageWidth: 400,
      imageHeight: 200,
      imageAlt: 'Custom image'
    });
  });

  document.querySelector('.bs-auto-close').addEventListener('click', function () {
    let timerInterval;
    Swal.fire({
      title: 'Auto close alert!',
      html: 'I will close in <b></b> milliseconds.',
      timer: 2000,
      timerProgressBar: true,
      didOpen: () => {
        Swal.showLoading();
        const b = Swal.getHtmlContainer().querySelector('b');
        timerInterval = setInterval(() => {
          b.textContent = Swal.getTimerLeft();
        }, 100);
      },
      onClose: () => {
        clearInterval(timerInterval);
      }
    }).then((result) => {
      if (result.dismiss === Swal.DismissReason.timer) {
        console.log('I was closed by the timer');
      }
    });
  });

  document.querySelector('.bs-rtl-lang').addEventListener('click', function () {
    Swal.fire({
      title: 'هل تريد الاستمرار؟',
      icon: 'question',
      iconHtml: '؟',
      confirmButtonText: 'نعم',
      cancelButtonText: 'لا',
      showCancelButton: true,
      showCloseButton: true
    });
  });

  document.querySelector('.bs-ajex-req').addEventListener('click', function () {
    Swal.fire({
      title: 'Submit your Github username',
      input: 'text',
      inputAttributes: {
        autocapitalize: 'off'
      },
      showCancelButton: true,
      confirmButtonText: 'Look up',
      showLoaderOnConfirm: true,
      preConfirm: (login) => {
        return fetch(`//api.github.com/users/` + login)
          .then((response) => {
            if (!response.ok) {
              throw new Error(response.statusText);
            }
            return response.json();
          })
          .catch((error) => {
            Swal.showValidationMessage(`Request failed: ` + error);
          });
      },
      allowOutsideClick: () => !Swal.isLoading()
    }).then((result) => {
      if (result.isConfirmed) {
        Swal.fire({
          title: result.value.login + `'s avatar`,
          imageUrl: result.value.avatar_url
        });
      }
    });
  });

  document.querySelector('.bs-mixin-exp').addEventListener('click', function () {
    const Toast = Swal.mixin({
      toast: true,
      position: 'top-end',
      showConfirmButton: false,
      timer: 3000,
      timerProgressBar: true,
      didOpen: (toast) => {
        toast.addEventListener('mouseenter', Swal.stopTimer);
        toast.addEventListener('mouseleave', Swal.resumeTimer);
      }
    });
    Toast.fire({
      icon: 'success',
      title: 'Signed in successfully'
    });
  });

  document.querySelector('.bs-success-ico').addEventListener('click', function () {
    Swal.fire({
      icon: 'success',
      title: 'Success modal'
    });
  });

  document.querySelector('.bs-error-ico').addEventListener('click', function () {
    Swal.fire({
      icon: 'error',
      title: 'Error modal'
    });
  });

  document.querySelector('.bs-warning-ico').addEventListener('click', function () {
    Swal.fire({
      icon: 'warning',
      title: 'warning modal'
    });
  });

  document.querySelector('.bs-info-ico').addEventListener('click', function () {
    Swal.fire({
      icon: 'info',
      title: 'info modal'
    });
  });

  document.querySelector('.bs-question-ico').addEventListener('click', function () {
    Swal.fire({
      icon: 'question',
      title: 'question modal'
    });
  });

  document.querySelector('.bs-text-input').addEventListener('click', function () {
    (async () => {
      const ipAPI = '//api.ipify.org?format=json';
      const inputValue = fetch(ipAPI)
        .then((response) => response.json())
        .then((data) => data.ip);
      const { value: ipAddress } = await Swal.fire({
        title: 'Enter your IP address',
        input: 'text',
        inputValue: inputValue,
        showCancelButton: true,
        inputValidator: (value) => {
          if (!value) {
            return 'You need to write something!';
          }
        }
      });
      if (ipAddress) {
        Swal.fire(`Your IP address is ` + ipAddress);
      }
    })();
  });

  document.querySelector('.bs-email-input').addEventListener('click', function () {
    (async () => {
      const { value: email } = await Swal.fire({
        title: 'Input email address',
        input: 'email',
        inputPlaceholder: 'Enter your email address'
      });

      if (email) {
        Swal.fire(`Entered email: ` + email);
      }
    })();
  });

  document.querySelector('.bs-url-input').addEventListener('click', function () {
    (async () => {
      const { value: url } = await Swal.fire({
        input: 'url',
        inputPlaceholder: 'Enter the URL'
      });
      if (url) {
        Swal.fire(`Entered URL: ` + url);
      }
    })();
  });

  document.querySelector('.bs-password-input').addEventListener('click', function () {
    (async () => {
      const { value: password } = await Swal.fire({
        title: 'Enter your password',
        input: 'password',
        inputPlaceholder: 'Enter your password',
        inputAttributes: {
          maxlength: 10,
          autocapitalize: 'off',
          autocorrect: 'off'
        }
      });
      if (password) {
        Swal.fire(`Entered password: ` + password);
      }
    })();
  });

  document.querySelector('.bs-textarea-input').addEventListener('click', function () {
    (async () => {
      const { value: text } = await Swal.fire({
        input: 'textarea',
        inputPlaceholder: 'Type your message here...',
        inputAttributes: {
          'aria-label': 'Type your message here'
        },
        showCancelButton: true
      });
      if (text) {
        Swal.fire(text);
      }
    })();
  });

  document.querySelector('.bs-select-input').addEventListener('click', function () {
    (async () => {
      const { value: fruit } = await Swal.fire({
        title: 'Select field validation',
        input: 'select',
        inputOptions: {
          Fruits: {
            apples: 'Apples',
            bananas: 'Bananas',
            grapes: 'Grapes',
            oranges: 'Oranges'
          },
          Vegetables: {
            potato: 'Potato',
            broccoli: 'Broccoli',
            carrot: 'Carrot'
          },
          icecream: 'Ice cream'
        },
        inputPlaceholder: 'Select a fruit',
        showCancelButton: true,
        inputValidator: (value) => {
          return new Promise((resolve) => {
            if (value === 'oranges') {
              resolve();
            } else {
              resolve('You need to select oranges :)');
            }
          });
        }
      });
      if (fruit) {
        Swal.fire(`You selected: ` + fruit);
      }
    })();
  });

  document.querySelector('.bs-radio-input').addEventListener('click', function () {
    (async () => {
      const inputOptions = new Promise((resolve) => {
        setTimeout(() => {
          resolve({
            '#ff0000': 'Red',
            '#00ff00': 'Green',
            '#0000ff': 'Blue'
          });
        }, 1000);
      });
      const { value: color } = await Swal.fire({
        title: 'Select color',
        input: 'radio',
        inputOptions: inputOptions,
        inputValidator: (value) => {
          if (!value) {
            return 'You need to choose something!';
          }
        }
      });
      if (color) {
        Swal.fire({
          html: `You selected: ` + color
        });
      }
    })();
  });

  document.querySelector('.bs-checkbox-input').addEventListener('click', function () {
    (async () => {
      const { value: accept } = await Swal.fire({
        title: 'Terms and conditions',
        input: 'checkbox',
        inputValue: 1,
        inputPlaceholder: 'I agree with the terms and conditions',
        confirmButtonText: 'Continue<i class="fa fa-arrow-right"></i>',
        inputValidator: (result) => {
          return !result && 'You need to agree with T&C';
        }
      });
      if (accept) {
        Swal.fire('You agreed with T&C :)');
      }
    })();
  });

  document.querySelector('.bs-file-input').addEventListener('click', function () {
    (async () => {
      const { value: file } = await Swal.fire({
        title: 'Select image',
        input: 'file',
        inputAttributes: {
          accept: 'image/*',
          'aria-label': 'Upload your profile picture'
        }
      });
      if (file) {
        const reader = new FileReader();
        reader.onload = (e) => {
          Swal.fire({
            title: 'Your uploaded picture',
            imageUrl: e.target.result,
            imageAlt: 'The uploaded picture'
          });
        };
        reader.readAsDataURL(file);
      }
    })();
  });

  document.querySelector('.bs-range-input').addEventListener('click', function () {
    (async () => {
      Swal.fire({
        title: 'How old are you?',
        icon: 'question',
        input: 'range',
        inputAttributes: {
          min: 8,
          max: 120,
          step: 1
        },
        inputValue: 25
      });
    })();
  });

  document.querySelector('.bs-multiple-input').addEventListener('click', function () {
    (async () => {
      const { value: formValues } = await Swal.fire({
        title: 'Multiple inputs',
        html: '<input id="swal-input1" class="swal2-input">' + '<input id="swal-input2" class="swal2-input">',
        focusConfirm: false,
        preConfirm: () => {
          return [document.getElementById('swal-input1').value, document.getElementById('swal-input2').value];
        }
      });
      if (formValues) {
        Swal.fire(JSON.stringify(formValues));
      }
    })();
  });
})();
