import PropTypes from 'prop-types'
import { useState } from 'react'
import { Button, Flex, Typography, Card, Dropdown, Modal, Table } from 'antd'
import TimeDisplay from '../../common/TimeDisplay'
import FarmControlAppIcon from '../../../Logos/FarmControlAppIcon'
import EyeIcon from '../../../Icons/EyeIcon'

const { Text, Title } = Typography

const NewAppUpdate = ({ update, onCancel, onUpdate }) => {
  const artifacts = Array.isArray(update?.artifacts) ? update.artifacts : []
  const primaryArtifact = artifacts.find((artifact) => artifact.url)

  const [changesMenuOpen, setChangesMenuOpen] = useState(false)

  const columns = [
    {
      title: 'Date',
      dataIndex: 'date',
      key: 'date',
      width: 290,
      render: (text, record) => {
        return <TimeDisplay dateTime={record.date} showSince={true} />
      }
    },
    {
      title: 'Author',
      dataIndex: 'author',
      key: 'author',
      width: 180
    },
    {
      title: 'Message',
      dataIndex: 'message',
      key: 'message',
      width: 500
    }
  ]

  const actionsMenu = {
    items: [
      {
        label: 'View Changes',
        key: 'viewChanges',
        icon: <EyeIcon />
      }
    ],
    onClick: ({ key }) => {
      if (key === 'viewChanges') {
        setChangesMenuOpen(true)
      }
    }
  }

  return (
    <>
      <Flex vertical gap='middle'>
        <Text>
          A new Farm Control update is available. Would you like to update now?
        </Text>
        <Card styles={{ body: { padding: '12px 18px 12px 12px' } }}>
          <Flex gap={12} style={{ width: '100%' }}>
            <FarmControlAppIcon style={{ width: '70px', height: '70px' }} />
            <Flex vertical gap={2} justify='center' style={{ width: '100%' }}>
              <Title level={3} style={{ margin: 0 }}>
                {'Farm Control UI'}
              </Title>
              <Flex
                align='center'
                justify='space-between'
                style={{ width: '100%' }}
              >
                <Flex style={{ columnGap: '15px', rowGap: '8px' }}>
                  <Text style={{ margin: 0 }} type='secondary'>
                    Version:{' '}
                    <Text>
                      {update?.version ? `v${update.version}` : 'Unknown'}
                    </Text>
                  </Text>
                  <Text style={{ margin: 0 }} type='secondary'>
                    Build Number:{' '}
                    <Text>
                      {update?.buildNumber
                        ? `b${update.buildNumber}`
                        : 'Unknown'}
                    </Text>
                  </Text>
                  <Text style={{ margin: 0 }} type='secondary'>
                    Branch: <Text>{update?.branch || 'Unknown'}</Text>
                  </Text>
                </Flex>
                <Dropdown menu={actionsMenu}>
                  <Button size='small' type='text'>
                    Actions
                  </Button>
                </Dropdown>
              </Flex>
            </Flex>
          </Flex>
        </Card>

        <Flex justify='space-between' gap='small' align='center'>
          <Flex gap='small'>
            <Text type='secondary'>Built at:</Text>
            <TimeDisplay dateTime={update?.builtAt} />
          </Flex>
          <Flex gap='small'>
            <Button onClick={onCancel}>Not Now</Button>
            <Button
              type='primary'
              onClick={() => onUpdate(update)}
              disabled={!primaryArtifact}
            >
              Update Now
            </Button>
          </Flex>
        </Flex>

        <Modal
          open={changesMenuOpen}
          onCancel={() => setChangesMenuOpen(false)}
          footer={null}
          title='View Changes'
          width={1200}
        >
          <div style={{ marginTop: '20px' }}>
            <Table
              dataSource={update?.changes}
              columns={columns}
              scroll={{ x: 1100 }}
              bordered={true}
              pagination={false}
              className='child-table'
            />
          </div>
        </Modal>
      </Flex>
    </>
  )
}

NewAppUpdate.propTypes = {
  update: PropTypes.object,
  onCancel: PropTypes.func.isRequired,
  onUpdate: PropTypes.func.isRequired
}

export default NewAppUpdate