account.cjsx

Fluxxor = require 'fluxxor'

BillingInfo = require '../components/billingInfo.cjsx'
Card = require '../components/card.cjsx'
ConfirmDelete = require '../components/confirmDelete.cjsx'
List = require '../components/list.cjsx'
Loader = require '../components/loader.cjsx'
PageTabs = require '../components/pageTabs.cjsx'

module.exports = React.createClass

    mixins: [
        Fluxxor.FluxMixin(React)
        Fluxxor.StoreWatchMixin('acct', 'ui', 'users')
        React.addons.LinkedStateMixin
        ReactRouter.Navigation
        ReactRouter.State
    ]

    getStateFromFlux: ->
        utils.getStateFromFlux.call @, ['acct', 'ui', 'users']

    componentDidMount: ->
        @handleGetMe()
        @handleGetSummary()
        @handleGetUserLists()

        # Add `me` to state
        if @state.users.me
            @setState @state.users.me

    componentDidUpdate: (prevProps, prevState) ->
        flux = @getFlux()
        @handleGetMe()
        @handleGetSummary()
        @handleGetUserLists()

        # Add `me` to state
        if utils.propAdded 'me', prevState.users, @state.users
            @setState @state.users.me

        # If a list was deleted,
        if utils.propAdded 'deleted', prevState.acct, @state.acct
            flux.actions.acct.extend {deleted: null}
            flux.actions.ui.addMessage
                color: 'green'
                header: 'Your list has been deleted'
                hide: 5000

        # If `me` was saved,
        if utils.propAdded 'me_saved', prevState.users, @state.users
            @showUpdates()
            flux.actions.users.extend {me_saved: null}

        # If the account was deleted,
        if utils.propAdded 'acct_deleted', prevState.acct, @state.acct
            flux.actions.auth.logout()
            flux.actions.ui.addMessage
                color: 'yellow'
                header: "Please check your email to confirm your account deletion."
                hide: 15000
            @transitionTo 'login'

    showUpdates: ->
        flux = @getFlux()
        updated = @state.users.me_saved
        msg = {color: 'green', hide: 3000}
        if updated.name
            flux.actions.ui.addMessage _.extend(msg, {header: 'Updated name', content: ''})
        if updated.phone
            flux.actions.ui.addMessage _.extend(msg, {header: 'Sent phone confirmation', content: 'Please check your text messages'})
        if updated.email
            flux.actions.ui.addMessage _.extend(msg, {header: 'Sent email confirmation', content: 'Please check your email'})

    handleGetMe: ->
        if not @state.users.me
            @getFlux().actions.users.me()

    handleGetSummary: ->
        {summary} = @state.acct
        {me} = @state.users
        if me and not summary
            @getFlux().actions.acct.getSummary me

    handleGetUserLists: ->
        {me} = @state.users
        if me and not @state.acct.lists
            @getFlux().actions.acct.getLists me

    handleDeleteList: (list) ->
        @getFlux().actions.acct.deleteList {list_hid: list.hid}

    handleDeleteAccount: ->
        @getFlux().actions.acct.delete @state.users.me

    handleSave: ->
        {name, email, phone} = @state
        me = _.extend {}, @state.users.me, {name, email, phone}
        @getFlux().actions.users.save me

    render: ->
        {summary, lists, deleting, acct_deleting} = @state.acct
        {me, me_saving} = @state.users

        meSaveButtonClasses = classNames
            ui: true
            huge: true
            primary: true
            button: true
            disabled: !!me_saving
            loading: !!me_saving

        <div>

            <div className="pusher">

                <div className="ui inverted vertical center aligned segment" style={{backgroundColor: '#B10'}}>

                    <Menu title='Account'/>

                </div>

                <PageTabs/>

                <div className="ui basic segment">

                    <div className="ui center aligned container">

                        <h2 className="ui icon header">
                            <i className="configure icon"></i>
                            Account
                            <div className="content">
                                <div className="sub header">
                                    Edit your account settings
                                </div>
                            </div>
                        </h2>

                    </div>

                </div>

                {if not me or not summary
                    <Loader/>
                else
                    <div className="ui container">

                        <div className="ui basic segment">
                            <h2 className="ui dividing header">
                                My Info
                            </h2>
                            <div className="ui basic segment">

                                <div className="ui huge form">

                                    <div className="ui three fields">

                                        <div className="ui field">
                                            <label>Name</label>
                                            <input type="text" valueLink={@linkState('name')}/>
                                        </div>

                                        <div className="ui field">
                                            <label>Email</label>
                                            <input type="text" valueLink={@linkState('email')}/>
                                        </div>

                                        <div className="ui field">
                                            <label>Phone</label>
                                            <input type="text" valueLink={@linkState('phone')}/>
                                        </div>

                                    </div>

                                    <div className="ui right aligned basic segment">

                                        <button className={meSaveButtonClasses} onClick={@handleSave}>Save</button>

                                    </div>

                                </div>

                            </div>
                        </div>

                        <div className="ui basic segment" style={{marginBottom: '4rem'}}>
                            <h2 className="ui dividing header">
                                Lists
                            </h2>
                            <div className="ui form">

                                <div className="ui container">

                                    {unless lists?.length
                                        <Link to="lists" className="ui center aligned blue header">
                                            Add a Foghorn list
                                        </Link>
                                    }

                                    <div className="ui relaxed items">
                                    {(lists or []).map (list, i) =>

                                        <div key={"list-#{i}"} className="ui two column stackable grid">
                                            <div className="six wide left aligned column">

                                                <div className="item">

                                                    <h2 className="ui header">

                                                        <i className="ui black phone icon"/>

                                                        <div className="content">

                                                            {if list.phone
                                                                <span>{list.phone_formatted}</span>
                                                            else
                                                                <span style={{fontStyle: 'italic'}}>Setup in progress</span>
                                                            }

                                                        </div>

                                                    </h2>

                                                </div>

                                            </div>
                                            <div className="ten wide right aligned column">

                                                <ConfirmDelete obj={list} deleting={deleting} onDelete={@handleDeleteList.bind(@, list)}/>

                                            </div>
                                        </div>

                                    }
                                    </div>

                                </div>
                            </div>
                        </div>

                        <BillingInfo/>

                        <div className="ui basic segment">
                            <h2 className="ui red dividing header">
                                Delete account
                            </h2>
                            <div className="ui form">
                                <ConfirmDelete obj={@state.users.me} deleting={acct_deleting} onDelete={@handleDeleteAccount}/>
                            </div>
                        </div>

                    </div>
                }

                <br/><br/><br/><br/><br/>
                <br/><br/><br/><br/><br/>

                <Footer/>

            </div>

        </div>