import * as React from 'react'
import * as semver from 'semver'
import { Select, Button, Row, Col, Typography, PageHeader } from 'antd'
import ExecutionCommand from '../ExecutionCommand'
import { targetToString } from '../../helpers'

import './index.less'

const { Paragraph } = Typography

interface Props {
  name: string
  namespace?: string

  description: string

  version: string
  versions: string[]

  onBack: () => void
  onClickView: () => void
  onClickDownload: () => void
  onChangeVersion: (version: string) => void
}

export class PackageHeader extends React.Component<Props, {}> {
  render() {
    const { name, namespace } = this.props

    return (
      <PageHeader
        className="package-header"
        footer={this.renderFooter()}
        onBack={this.props.onBack}
        extra={[this.renderExtra()]}
        title={targetToString({ name, namespace })}
      />
    )
  }

  renderExtra = () => {
    const { onChangeVersion, versions } = this.props

    const version = this.props.version || semver.rsort(versions)

    return (
      <div>
        <Select
          value={version}
          onChange={onChangeVersion}
          style={{ width: '150px', paddingRight: '8px' }}
        >
          {versions.map(version => (
            <Select.Option value={version}>{version}</Select.Option>
          ))}
        </Select>
      </div>
    )
  }

  renderFooter() {
    const { name, namespace, description, version } = this.props

    return (
      <Row>
        <Col sm={24} style={{ textAlign: 'center' }}>
          {description}
        </Col>
        <Col sm={24}>
          <ExecutionCommand
            name={name}
            namespace={namespace}
            version={version}
          />
        </Col>
      </Row>
    )
  }
}
