// @flow
import React from 'react'

import InvestmentBox from 'components/BoxElements/InvestmentBox'
import OverviewVideo from './OverviewVideo'
import InformationHeader from './InformationHeader'
import InvestmentDetail from './InvestmentDetail'
import { DetailAssetWrapper, InvestmentBoxWrapper } from './Wrappers'

import type { AssetDataT } from 'components/BoxElements/AssetBox'
import type { ContractDataT } from 'components/BoxElements/InvestmentBox'
import type { GeneralInfoT, InvestmentInfoT } from './InvestmentDetail'

export type CompleteAssetDataT = {
  videoSrc: string,
  brochureLink: string,
  assetData: AssetDataT,
  generalInfo: GeneralInfoT,
  investmentInfo: InvestmentInfoT
}

type Props = {
  role?: string,
  className?: string,
  completeAssetData: CompleteAssetDataT,
  contractData: ContractDataT,
  texts: Object
}

const DetailAsset = ({
  role,
  className,
  completeAssetData,
  contractData,
  texts
}: Props) => {
  const {
    videoSrc,
    brochureLink,
    assetData,
    generalInfo,
    investmentInfo
  } = completeAssetData
  return (
    <DetailAssetWrapper role={role} className={className}>
      <OverviewVideo videoSrc={videoSrc} brochureLink={brochureLink} />
      <InformationHeader assetData={assetData} />
      <InvestmentBoxWrapper>
        <InvestmentBox
          contractData={contractData}
          secured={assetData.secured}
          texts={texts}
        >
          <button>invest mate</button>
        </InvestmentBox>
      </InvestmentBoxWrapper>
      <InvestmentDetail
        generalInfo={generalInfo}
        investmentInfo={investmentInfo}
      />
    </DetailAssetWrapper>
  )
}

export default DetailAsset
