import { createElement } from 'react'
import PropTypes from 'prop-types'
import { Flex, Skeleton } from 'antd'
import { getPropertyValue } from '../../../database/ObjectModels'
import ObjectProperty from './ObjectProperty'
import ObjectTimelineItem from './ObjectTimelineItem'

const ObjectTimelineRow = ({
  model,
  record,
  startDate,
  endDate,
  rangeStart,
  rangeEnd,
  labelWidth,
  minTrackWidth,
  tickCount,
  isEditing = false,
  rowActions = [],
  renderActions,
  lazyLoading = false,
  skeletonBoundary,
  color = 'var(--color-primary, #1677ff)',
  shadowPadding = 12
}) => {
  const isSkeleton = record?.isSkeleton === true
  const nameProperty = model.properties?.find(
    (property) => property.name === 'name'
  )
  const referenceProperty = model.properties?.find(
    (property) => property.name === '_reference'
  )
  const nameValue = getPropertyValue(record, 'name')
  const modelPrefix = model.prefix
  const label =
    typeof nameValue === 'string'
      ? nameValue
      : modelPrefix + ':' + String(record?._reference || '')
  const startValue = getPropertyValue(record, startDate)
  const endValue = endDate ? getPropertyValue(record, endDate) : undefined
  const actions =
    !isSkeleton && rowActions.length > 0
      ? renderActions(record, lazyLoading)
      : null

  return (
    <Flex
      data-skeleton-boundary={skeletonBoundary}
      className='objectTimelineRow'
      style={{
        width: '100%',
        minWidth: labelWidth + minTrackWidth,
        minHeight: 49.5,
        borderBottom: '1px solid var(--color-table-row-border)'
      }}
    >
      <div
        className='objectTimelineRowLabelContainer'
        style={{ minWidth: labelWidth + shadowPadding }}
      >
        <Flex
          align='center'
          gap='small'
          className='objectTimelineRowLabel'
          style={{
            width: labelWidth,
            minWidth: labelWidth,
            flex: '0 0 auto',
            padding: '4px 12px 4px 8px',
            overflow: 'hidden'
          }}
        >
          {isSkeleton ? (
            <Skeleton.Input active size='small' style={{ width: '75%' }} />
          ) : (
            <>
              <Flex style={{ width: 29 }} justify='center'>
                {createElement(model.icon, {
                  style: { fontSize: 14, flex: '0 0 auto' }
                })}
              </Flex>
              <Flex
                vertical
                style={{
                  flex: 1,
                  paddingLeft: '8px',
                  minWidth: 168
                }}
              >
                {nameProperty ? (
                  <ObjectProperty
                    {...nameProperty}
                    objectData={record}
                    isEditing={isEditing}
                    style={{ minWidth: 0 }}
                  />
                ) : (
                  <ObjectProperty
                    {...referenceProperty}
                    objectData={record}
                    isEditing={isEditing}
                    style={{ fontWeight: 600, minWidth: 0 }}
                  />
                )}
              </Flex>
              {actions}
            </>
          )}
        </Flex>
      </div>
      <Flex
        align='center'
        style={{
          position: 'relative',
          flex: '1 1 auto',
          minWidth: minTrackWidth,
          padding: '0 4px',
          marginLeft: shadowPadding * -1,
          backgroundImage:
            'linear-gradient(to right, color-mix(in srgb, var(--color-text) 7%, transparent) 1px, transparent 1px)',
          backgroundSize: `${100 / tickCount}% 100%`
        }}
      >
        <ObjectTimelineItem
          label={label}
          labelIsReference={nameProperty == undefined}
          startValue={startValue}
          endValue={endValue}
          rangeStart={rangeStart}
          rangeEnd={rangeEnd}
          isSkeleton={isSkeleton}
          color={color}
        />
      </Flex>
    </Flex>
  )
}

ObjectTimelineRow.propTypes = {
  model: PropTypes.object.isRequired,
  record: PropTypes.object.isRequired,
  color: PropTypes.string,
  startDate: PropTypes.string.isRequired,
  endDate: PropTypes.string,
  rangeStart: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
    .isRequired,
  rangeEnd: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
    .isRequired,
  labelWidth: PropTypes.number.isRequired,
  minTrackWidth: PropTypes.number.isRequired,
  tickCount: PropTypes.number.isRequired,
  isEditing: PropTypes.bool,
  rowActions: PropTypes.array,
  renderActions: PropTypes.func.isRequired,
  lazyLoading: PropTypes.bool,
  skeletonBoundary: PropTypes.string,
  shadowPadding: PropTypes.number
}

export default ObjectTimelineRow