import React, {Component, Fragment} from 'react'

import PropTypes from 'prop-types'

import {connect} from 'react-redux'
import {formHOC} from 'c2-form'
import {List, Map} from 'immutable'
import UUID from 'uuid-js'
import moment from 'moment'
import {Table, Column} from '../../Layout/components/C2Table'
import {SubmitButton, Button} from '../../common/buttons'
import SiteActivationNotification from './SiteActivationNotification'
import {fetchTaskDetails, saveTaskDetails, fetchSiteActivationEmailList} from 'iop-
redux/siteintegration/actions'
import {sendActivationEmail} from 'iop-redux/siteintegration/api'
import {realUserId, currentUserRole} from 'iop-redux/users/selectors'
import {siteActivationEmailList} from '../../redux/src/siteintegration/selectors'
import RequestMessages from 'iop/Forms/components/RequestMessages'
import Modal from 'iop/Layout/components/Modal'
import GeneratePMSConfirmation from './GeneratePMSConfirmation'
import style from './SiteActivationDetailsTable.module.css'
import DateTime from 'iop/common/DateTime'
import {CalendarIcon} from 'iop/common/icons'
import {toastSuccessMsg, toastEachError} from 'iop/toast_utils'
import WithdrawCallsigns from
'iop/Projects/SiteActivationDetails/WithdrawCallsigns'
import CBANDActivation from
'iop/Projects/SiteActivationDetails/CBANDActivation/CBANDActivation'
import config from 'iop/config'

class SiteActivationDetailsCombinedTable extends Component {

static propTypes = {
rows: PropTypes.instanceOf(List),
setInitialValues: PropTypes.func.isRequired,
currentValues: PropTypes.instanceOf(Map),
setValue: PropTypes.func.isRequired,
columns: PropTypes.array.isRequired,
task: PropTypes.instanceOf(Map),
project: PropTypes.instanceOf(Map),
tableId: PropTypes.string.isRequired,
saveTaskDetails: PropTypes.func.isRequired,
fetchTaskDetails: PropTypes.func.isRequired,
sendActivationEmail: PropTypes.func.isRequired,
loginId: PropTypes.string,
fetchSiteActivationEmailList: PropTypes.func,
emailList: PropTypes.instanceOf(List),
loading: PropTypes.bool,
details: PropTypes.instanceOf(Map),
projectWorkflow: PropTypes.object,
userRole: PropTypes.string
}

defaultState = {
activationDate: moment().format('MM/DD/YYYY'),
allSelected: false,
activating: false,
selectionMade: false,
onAirNotifications: true,
showModal: false,
message: null,
error: null,
 showPartialCallSignMessage: false,
showCallsignActivation: false,
showPowerCorrectionButton:true,
isChecked:false
}

state = this.defaultState

componentDidMount() {
this.initialize()
this.props.fetchSiteActivationEmailList(this.props.project.get('proj_number'),
this.props.loginId)
}

componentDidUpdate(prevProps) {
if (!prevProps.rows.equals(this.props.rows)) {
this.initialize()
}
}

initialize = () => {
this.resetState()
this.props.setInitialValues({
rows: this.props.rows.map((row) => {
row = row.set('_id', UUID.create().toString())
row = row.set('checked', row.get('is_activated') === 'yes')
row = row.set('disabled', row.get('is_disabled') === 'yes')
return row
})
})
}

resetState = () => {
this.setState({...this.defaultState})
}

resetMessages = () => {
this.setState({message: null, error: null})
}

onChange = (id, field, value) => {

const {task} = this.props
const rows = this.props.currentValues.get('rows') || List()
const index = rows.findIndex((row) => row.get('_id') === id)
const updated = rows.update(index, (row) => {
row = row.set(field, value)
if (task.get('status') === 'COMPLETED' && row.get('activated') ===
'Activated') return row

if (this.state.activationDate !== '' && row.get('checked')) {

row = row.set('activation_date',
moment(this.state.activationDate).format('MM/DD/YYYY'))
} else if (!row.get('checked')) {
row = row.set('activation_date', null)
}

return row
})
 if(value) {
this.setState({
isChecked: true,
selectionMade: true
})
} else {
const anyChecked = updated.some((updatedRow) => updatedRow.get('checked'))
this.setState({
isChecked: anyChecked,
selectionMade: anyChecked
})
}

this.props.setValue('rows', updated)
}

setActivationDate = (activationDate) => {

const rows = this.props.currentValues.get('rows') || List()
const updated = this.assignActivationDate(rows, activationDate)

this.setState({activationDate})
this.props.setValue('rows', updated)
}

assignActivationDate = (rows, date) => {

const {task} = this.props
return rows.map((row) => {
if (
row.get('is_activated') === 'yes' ||
(task.get('status') === 'COMPLETED' && row.get('activated') ===
'Activated')
)
return row
if (row.get('checked')) {
row = row.set('activation_date', moment(date).format('MM/DD/YYYY'))
} else {
row = row.set('activation_date', '')
}

return row
})
}

toggleAllSelected = () => {
const {task, setValue} = this.props
this.setState({allSelected: !this.state.allSelected}, () => {
let allSelected = false
const rows = this.props.currentValues.get('rows') || List()
const checkedRows = rows.map((row) => {
if (task.get('status') === 'COMPLETED' && row.get('activated') !==
'Activated') {
return row
} else if (row.get('is_activated') === 'no') {
allSelected = this.state.allSelected
row = row.set('checked', allSelected)
}

return row
})
 const updated =
this.state.activationDate !== '' && task.get('status') !== 'COMPLETED'
? this.assignActivationDate(checkedRows, this.state.activationDate)
: checkedRows

this.setState({selectionMade: allSelected})
setValue('rows', updated)
})
}

formatPayload = () => {
const taskId = this.props.task.get('task_inst_id')
const taskType = this.props.task.get('name')
let emails = this.props.currentValues.getIn(['emails'], List())
emails = emails.map((email) => email.get('value')).toJS()

const project = {
project_id: this.props.project.get('proj_number'),
wf_inst_id: this.props.project.get('si_workflow_instance_id'),
emails,
comments: this.props.currentValues.get('comments') || ''
}

let rows = this.props.currentValues.get('rows') || List()

rows = rows
.filter((row) => {
const checked = row.get('checked')
if (!checked) return false
const isActivated = row.get('is_activated') === 'yes'
const status = this.props.task.get('status')
if (status === 'COMPLETED') {
return true
}
return !isActivated
})
.map((row) => {
row = row.delete('_id')
row = row.delete('checked')
return row
})
return {taskId, taskType, project, rows}
}

onActivate = () => {
const callSignsPresent = this.props.details.get('call_signs', List()).size > 0
const {taskId, taskType, project, rows} = this.formatPayload()
const {projectWorkflow} = this.props
this.setState({activating: true})
this.props
.saveTaskDetails(
taskId,
taskType,
rows.toJS(),
{
...project,
wf_inst_id: projectWorkflow.wf_inst_id,
project_activation: callSignsPresent ? 'no' : 'yes'
},
this.props.currentValues.get('generate_pms') || ''
 )
.then((res) => {
this.props.fetchTaskDetails(taskId, taskType)
this.resetState()
})
.catch(() => this.setState({activating: false, showPartialCallSignMessage:
false}))
}

onSendActivation = () => {
this.setState({activating: true})
const callSignsPresent = this.props.details.get('call_signs', List()).size > 0
const {taskId, taskType, project, rows} = this.formatPayload()
const payload = {
...project,
task_inst_id: taskId,
fuze_site_id: this.props.project.get('fuze_site_id'),
user_id: this.props.loginId,
Site_Activation: rows.toJS(),
project_activation: callSignsPresent ? 'no' : 'yes'
}
sendActivationEmail(payload)
.then((res) => {
this.props.fetchTaskDetails(taskId, taskType)
this.props.fetchSiteActivationEmailList(this.props.loginId)
this.resetState()
toastSuccessMsg(res.data.message)
})
.catch((err) => {
this.setState({activating: false})
toastEachError(err)
})
}

getColumns() {
const {columns} = this.props

return columns.map((column) => (

<Column
id={column.key}
key={column.key}
excelLabel={column.label}
headerClassName={column.className}
header={column.label}
orderValue={column.key}
cell={column.key}
cellClassName={(row) => {
let className = ''
if (row.activated === 'Activated') className = `${style.activatedRow}`
if (row.activated === 'Withdrawn') className =
`StatusCellBackgroundColor-red`
if (column.key === 'activated') className += ` ${style.activatedCol}`
return className
}}
/>
))
}

toggleOnAirNotifications = (e) => {

 this.setState({onAirNotifications: e.target.checked})
this.props.setValue('emails', List())
}

openModal = () => this.setState({showModal: true})

closeModal = () => this.setState({showModal: false})

handleActivate = () => {
this.setState({showCallsignActivation: true})
}

getActivationRows = () => {
return (this.props.currentValues.get('rows') || List())
.filter((row) => row.get('checked'))
.map((row) => {
row = row.delete('_id')
row = row.delete('checked')
return row
})
}
getCbandEmail=()=>{
let emails = this.props.currentValues.getIn(['emails'], List())
emails = emails.map((email) => email.get('value')).toJS()
return emails
}
render() {
const {activationDate, activating, allSelected, onAirNotifications} =
this.state
const {loading, emailList} = this.props
const columns = this.getColumns()
const isEditable = 'yes' // this.props.task.get('is_editable')
const status = this.props.task.get('status')
const pmModal = this.props.details.get('display_pm_modal')
const taskId = this.props.task.get('task_inst_id')
const taskType = this.props.task.get('name')
const callSignsPresent = this.props.details.get('call_signs', List()).size > 0
const data = this.props.currentValues.get('rows') || List()
const activatedRows = this.props.currentValues
.get('rows', List())
.toJS()
.filter((r) => r.activated === 'Activated')
const rtiDate = this.props.details.get('rti_completion_date', null)

if (isEditable === 'yes') {

columns.push(
<Column
id='checkbox'
key='checkbox'
headerClassName='width-auto'
header='Select'
cellClassName={(row) => (row.activated === 'Activated' ?
style.activatedRow : null)}
cell={(row) => (
<input
type='checkbox'
onChange={(e) => this.onChange(row._id, 'checked', e.target.checked)}
checked={row.checked}
disabled={row.disabled || status === 'N/A'}
 />
)}
/>
)
}
return (
<div>
{this.state.showCallsignActivation && (
<Modal
large
title='Call Sign Activation'
handleHideModal={() => this.setState({showCallsignActivation:
false,showPowerCorrectionButton:false})}
>
<CBANDActivation
projectId={this.props.project.get('proj_number')}
fuzeSiteId={this.props.project.get('fuze_site_id')}
wfInstId={this.props.project.get('wf_inst_id')}
taskId={this.props.task.get('task_inst_id')}
vendor={this.props.project.get('vendor_name')}
emails={this.getCbandEmail()}
comments={this.props.currentValues.get('comments') || ''}
loginId={this.props.loginId}
data={this.getActivationRows()}
showPowerCorrectionButton={this.state.showPowerCorrectionButton}
cancel={() => this.setState({showCallsignActivation:
false,showPowerCorrectionButton:false})}
/>
</Modal>
)}
{this.state.showPartialCallSignMessage && (
<Modal
large
title='Integration Complete Notice'
handleHideModal={() => this.setState({showPartialCallSignMessage:
false})}
>
<div style={{display: 'flex', flexDirection: 'column', alignItems:
'center'}}>
<div>IOP will not send Integration Complete notice to Fuze SPM until
all callsigns are activated.</div>
<Button style={{width: 100, marginTop: 20}}
onClick={this.onActivate}>
Ok
</Button>
</div>
</Modal>
)}
<div style={{display: 'flex', justifyContent: 'flex-end'}}>
{rtiDate && (
<span
style={{
marginRight: 20,
fontSize: 16,
fontFamily: 'vznhg-etext-bold',
color: 'var(--color-red)',
border: '3px solid var(--color-red)',
padding: 5
}}
 >
RTI Complete Date: {rtiDate}
</span>
)}
{isEditable === 'yes' && data.count() > 0 && (
<Button style={{marginBottom: '5px'}} onClick={this.toggleAllSelected}
disabled={status === 'N/A'}>
{allSelected ? 'Deselect All' : 'Select All'}
</Button>
)}
</div>
{data.count() > 0 && (
<Table
id={this.props.tableId}
data={this.props.currentValues.get('rows', List()).toJS()}
rowId='_id'
onEmpty={<div className='text-center'>No results found</div>}
className={`preFormattedTable table table-condensed table-striped
sortable table-bordered text-left kpi-table ${style.callsignTable}`}
>
{columns}
</Table>
)}
{isEditable === 'yes' && (
<div
style={{
background: '#F2F2F2',
border: '1px solid #ddd',
padding: 15,
margin: 0,
marginBottom: 10,
width: '100%'
}}
>
<div className='row'>
<div className='col-xs-6'>
<SiteActivationNotification
currentValues={this.props.currentValues}
setValue={this.props.setValue}
checked={onAirNotifications}
handleCheckbox={this.toggleOnAirNotifications}
emailList={emailList}
loading={loading}
status={status}
/>
</div>
<div className='col-sm-6'>
{!callSignsPresent && (
<Fragment>
{status === 'IN PROGRESS' && (
<SubmitButton onClick={pmModal === 'yes' ? this.openModal :
this.onActivate}>
Send Project Completion
</SubmitButton>
)}
{status === 'COMPLETED' && (
<SubmitButton onClick={this.onSendActivation}>Send Project
Completion</SubmitButton>
)}
 </Fragment>
)}
{callSignsPresent && (
<div className='pull-right' style={{ display: 'flex' }}>
{status === 'IN PROGRESS' && activatedRows.length > 0 && (
<span style={{ marginRight: '3rem' }}>
<WithdrawCallsigns
project={this.props.project}
details={this.props.details}
task={this.props.task}
taskId={this.props.task.get('task_inst_id')}
comments={this.props.currentValues.get('comments') || ''}
rows={activatedRows}
onSuccess={() => {
const taskId = this.props.task.get('task_inst_id')
const taskType = this.props.task.get('name')
this.props.fetchTaskDetails(taskId, taskType)
}}
/>
</span>
)}
{status === 'IN PROGRESS' && (
<div style={{ position: 'relative' }}>
<DateTime
value={activationDate}
closeOnSelect
timeFormat={false}
onChange={this.setActivationDate}
isValidDate={(c) => {
return this.props.userRole.toLowerCase() ===
'technician'
? c.isAfter(moment().subtract(8,
'days').format('MM/DD/YYYY'))
: true
}}
/>
<CalendarIcon style={{ position: 'absolute', top: '10px',
right: '5px' }} />
</div>
)}
{status === 'IN PROGRESS' ? (
<SubmitButton
style={{ marginLeft: '5px' }}
disabled={!this.state.isChecked ||activationDate === '' ||
this.state.activating}
onClick={this.handleActivate}
>
Activate
</SubmitButton>
) : null}
{status === 'COMPLETED' && (
<SubmitButton style={{marginLeft: '5px'}}
onClick={this.onSendActivation} disabled={activating}>
Send Activation
</SubmitButton>
)}
</div>
)}
</div>
 </div>
{status === 'IN PROGRESS' && (
<div className='row'>
<div className='col-xs-6'>
<div style={{display: 'flex', alignItems: 'center'}}>
<span style={{width: 200}}>Add Comment</span>
<textarea
style={{width: '75%'}}
value={this.props.currentValues.get('comments') || ''}
onChange={(e) => this.props.setValue('comments',
e.target.value)}
/>
</div>
</div>
</div>
)}
</div>
)}
<RequestMessages requestId={saveTaskDetails.requestId(taskId, taskType)} />
{this.state.showModal && (
<Modal id='generate-pms-confirmation' handleHideModal={this.closeModal}
title='Generate PM'>
<GeneratePMSConfirmation
setValue={this.props.setValue}
currentValues={this.props.currentValues}
project={this.props.project}
onActivate={this.onActivate}
closeModal={this.closeModal}
/>
</Modal>
)}
</div>
)
}
}

const mapStateToProps = (state, props) => {

const loginId = realUserId(state)
const userRole = currentUserRole(state, loginId)
return {
...siteActivationEmailList(state, {loginId}),
formName: `${props.tableId}-${props.taskId}`,
loginId,
userRole
}
}
export default connect(mapStateToProps, {
fetchTaskDetails,
saveTaskDetails,
fetchSiteActivationEmailList,
sendActivationEmail
})(formHOC(SiteActivationDetailsCombinedTable))