// ** React Imports
import { useState, Fragment } from 'react'

// ** Third Party Components
import { X, Star, Trash } from 'react-feather'
import { Modal, ModalBody, Button, Form, FormGroup, Input, Label, CustomInput } from 'reactstrap'

// ** Utils
import { isObjEmpty, selectThemeColors } from '@utils'

// ** Modal Header
const selectedContact = {}
const ModalHeader = props => {
    // ** Props
    const { children, store, handleContactSidebar, setDeleted, deleted, deleteContact, dispatch } =
        props

    // ** Function to delete task
    const handleDeleteContact = () => {
        setDeleted(!deleted)
        dispatch(deleteContact(selectedContact.id))
        handleContactSidebar()
    }

    return (
        <div className='modal-header d-flex align-items-center justify-content-between mb-1'>
            <h5 className='modal-title'>{children}</h5>
            <div className='todo-item-action d-flex align-items-center'>
                {store && !isObjEmpty(selectedContact) ? (
                    <Trash className='cursor-pointer mt-25' size={16} onClick={() => handleDeleteContact()} />
                ) : null}
                <X className='font-weight-normal mt-25 cursor-pointer' size={16} onClick={handleContactSidebar} />
            </div>
        </div>
    )
}

const ContactSidebar = props => {
    // ** Props
    const { open, handleContactSidebar, store, dispatch, addContact, updateContact, selectContact, deleteContact } = props

    const [firstName, setFirstName] = useState(''),
        [lastName, setLastName] = useState(''),
        [mobile, setMobile] = useState(''),
        [email, setEmail] = useState(''),
        [smsEnabled, setSmsEnabled] = useState(false),
        [deleted, setDeleted] = useState(false)


    // ** Returns sidebar title
    const handleSidebarTitle = () => {
        if (store && !isObjEmpty(selectedContact)) {
            return 'Update Contact'
        } else {
            return 'Add Contact'
        }
    }

    // ** Function to run when sidebar opens
    const handleSidebarOpened = () => {
        const  selectedContact  = {}
        if (!isObjEmpty(selectedContact)) {
            setFirstName(selectedContact.firstName)
            setLastName(selectedContact.lastName)
            setMobile(selectedContact.mobile)
            setEmail(selectedContact.email)
            setSmsEnabled(selectedContact.smsEnabled)
            setDeleted(selectedContact.isDeleted)
        }
    }

    // ** Function to run when sidebar closes
    const handleSidebarClosed = () => {
        setFirstName('')
        setLastName('')
        setMobile('')
        setEmail('')
        setSmsEnabled(false)
        setDeleted(false)
    }

    // ** Function to reset fileds
    const handleResetFields = () => {
        setFirstName(selectedContact.firstName)
        setLastName(selectedContact.lastName)
        setMobile(selectedContact.mobile)
        setEmail(selectedContact.email)
        setSmsEnabled(selectedContact.smsEnabled)
        setDeleted(selectedContact.isDeleted)
    }

    // ** Renders Footer Buttons
    const renderFooterButtons = () => {

        const state = {
            firstName,
            lastName,
            mobile,
            email,
            smsEnabled,
            isDeleted: deleted
        }

        if (store && !isObjEmpty(selectedContact)) {
            return (
                <Fragment>
                    <Button
                        color='primary'
                        disabled={!firstName.length && !lastName.length}
                        className='update-btn update-todo-item mr-1'
                        onClick={() => {
                            dispatch(updateContact({ ...state, id: selectedContact.id }))
                            handleContactSidebar()
                        }}
                    >
                        Update
                    </Button>
                    <Button color='secondary' onClick={handleResetFields} outline>
                        Reset
                    </Button>
                </Fragment>
            )
        } else {
            return (
                <Fragment>
                    <Button
                        color='primary'
                        disabled={!firstName.length && !lastName.length}
                        className='add-todo-item mr-1'
                        onClick={() => {
                            dispatch(addContact(state))
                            handleContactSidebar()
                        }}
                    >
                        Add
                    </Button>
                    <Button color='secondary' onClick={handleContactSidebar} outline>
                        Cancel
                    </Button>
                </Fragment>
            )
        }
    }

    return (
        <Modal
            isOpen={open}
            toggle={handleContactSidebar}
            className='sidebar-lg'
            contentClassName='p-0'
            onOpened={handleSidebarOpened}
            onClosed={handleSidebarClosed}
            modalClassName='modal-slide-in sidebar-todo-modal'
        >
            <Form id='form-modal-contact' className='todo-modal' onSubmit={e => e.preventDefault()}>
                <ModalHeader
                    store={store}
                    deleted={deleted}
                    dispatch={dispatch}
                    deleteContact={deleteContact}
                    setDeleted={setDeleted}
                    handleContactSidebar={handleContactSidebar}
                >
                    {handleSidebarTitle()}
                </ModalHeader>
                <ModalBody className='flex-grow-1 pb-sm-0 pb-3'>
                    <FormGroup>
                        <Label className='form-label' for='contact-firstname'>
                            First Name <span className='text-danger'>*</span>
                        </Label>
                        <Input
                            id='contact-firstname'
                            value={firstName}
                            placeholder='First Name'
                            className='new-todo-item-title'
                            onChange={e => setFirstName(e.target.value)}
                        />
                    </FormGroup>
                    <FormGroup>
                        <Label className='form-label' for='contact-lastname'>
                            Last Name <span className='text-danger'>*</span>
                        </Label>
                        <Input
                            id='contact-lastname'
                            value={lastName}
                            placeholder='Last Name'
                            className='new-todo-item-title'
                            onChange={e => setLastName(e.target.value)}
                        />
                    </FormGroup>
                    <FormGroup>
                        <Label className='form-label' for='contact-mobile'>
                            Mobile
                        </Label>
                        <Input
                            id='contact-mobile'
                            value={mobile}
                            placeholder='Mobile number'
                            className='new-todo-item-title'
                            onChange={e => setMobile(e.target.value)}
                        />
                    </FormGroup>
                    <FormGroup>
                        <Label className='form-label' for='contact-sms'>
                            SMS Enabled
                        </Label>
                        <CustomInput
                            type='switch'
                            id='contact-sms'
                            label='Enable SMS for this contact'
                            checked={smsEnabled}
                            onChange={e => setSmsEnabled(e.target.checked)}
                        />
                    </FormGroup>
                    <FormGroup>
                        <Label className='form-label' for='contact-email'>
                            Email
                        </Label>
                        <Input
                            id='contact-email'
                            value={email}
                            placeholder='Email'
                            className='new-todo-item-title'
                            onChange={e => setEmail(e.target.value)}
                        />
                    </FormGroup>
                    <FormGroup className='my-1'>{renderFooterButtons()}</FormGroup>
                </ModalBody>
            </Form>
        </Modal>
    )
}

export default ContactSidebar
