import React, { useEffect, useState } from 'react';
import { faLaughWink } from '@fortawesome/free-solid-svg-icons/faLaughWink';
import { storiesOf } from '@storybook/react';
import { Alert } from '.';
import { Button } from '../Button';
import { CloseBtn } from '../CloseBtn';
import { Input } from '../Input';
import { Textarea } from '../Textarea';

storiesOf('Components/Alert', module).add('default', () => {
   console.log(Alert.show);
   const openModal = (): void => {
      Alert.show({
         title: 'Hello, how are you?',
         message: 'Welcome, click the confirm button to win a bonus!',
         titleColor: 'orange',
         icon: faLaughWink,
         iconColor: 'orange',
         buttons: [
            {
               text: 'Cancel',
               bgColor: '#bbb',
               onPress: () => {
                  console.log('sdds');
               },
            },
            {
               text: 'Confirm',
               bgColor: '#222',
               onPress: () => {
                  console.log('sdds');
               },
            },
         ],
      });
   };

   return (
      <>
         <Button variant="light" onClick={() => openModal()}>
            Open modal
         </Button>
         <Alert />
      </>
   );
});
