import { h } from 'preact' /** @jsx h */
import { Header, LayoutDefault } from '~src/views/layout/layout'
import {
  MemorySummary,
  Quote,
  SectionHeader,
  SectionPrimary,
  ShareFacebookButton,
  ShareTwitterButton,
  ShareWhatsappButton,
  Silhouette,
  TopBar,
} from '~src/views/components'
import { MemoryCommentsForm } from '~src/memories/components'
import * as detect from '~src/utils/detect'

export default ({ id, memory, comments, assets, loading }) => (
  <LayoutDefault>
    <Header>
      <TopBar />
    </Header>

    {loading ? <div /> : (
      <div className="page pages--memory-victim">
        <section className="section--victim-data">
          <MemorySummary
            name={memory.victimName}
            owner={memory.ownerFirstName}
            birthYear={memory.victimBornAt}
            deathYear={memory.victimDeadAt}
            description={memory.victimHistory}
            image={`${process.env.SERVER_DOMAIN}${memory.victimPhoto}`}
            imageWidth="223px"
            imageHeight="179px"
            imageAlignment="right"
            baseFontSize="16px"
            distanceY="84px"
            width="80%"
          />
        </section>

        <section className="section--quote">
          <Silhouette variation={memory.victimSilhouette} height="594" />
          <div className="title">
            {memory.victimGoodWords}
          </div>
          <Quote>
            {memory.victimRememberText}
          </Quote>
          <div className="gallery columns is-multiline is-desktop">
            {assets &&
              assets
                .filter(asset => asset.assetType === 'image')
                .map((asset, index) => (
                  <img
                    className="column column is-one-third"
                    src={`${process.env.SERVER_DOMAIN}${asset.assetUrl}`}
                    alt={`asset-${index}`}
                  />
                ),
              )
            }
          </div>
        </section>

        <SectionPrimary
          className="section--share"
          header={<SectionHeader title="Compartilhe" hideBorder />}
        >
          <ShareFacebookButton
            className="share-button"
            href="https://vivosemnos.org/"
          />
          <ShareTwitterButton
            className="share-button"
            href="https://vivosemnos.org/"
            text={
              '#VivosEmNós quer usar a memória como ferramenta para mudança. Se você conhece ' +
              'alguém que teve a sua história interrompida pela violência, crie aqui uma página ' +
              'de homenagem para se juntar à luta por mais respeito à vida.'
            }
          />
          {!detect.mobile ? <i /> : (
            <ShareWhatsappButton
              className="share-button"
              text="https://vivosemnos.org/"
            />
          )}
        </SectionPrimary>

        <SectionPrimary
          className="section--known-victim"
          header={
            <SectionHeader
              title="Se você conheceu essa pessoa"
              subtitle="use este espaço para contar o que está vivo em você sobre ela."
            />
          }
        >
          <MemoryCommentsForm memoryId={id} />
        </SectionPrimary>

        <SectionPrimary className="section--memory-comments">
          {comments.map(comment => (
            <div className="block--memory-comment">
              <div className="commenter--name">
                {comment.name}
              </div>
              <div className="commenter-comment">
                {comment.comment}
              </div>
            </div>
          ))}
        </SectionPrimary>
      </div>
    )}
  </LayoutDefault>
)

@@ -2202,33 +2202,34 @@
            href=
-%22
+%7B%60
 https://vivosemn
@@ -2227,33 +2227,53 @@
 /vivosemnos.org/
-%22
+memory/$%7Bmemory.id%7D%60%7D
 %0A          /%3E%0A  
@@ -2354,17 +2354,18 @@
    href=
-%22
+%7B%60
 https://
@@ -2383,315 +2383,92 @@
 org/
-%22%0A            text=%7B%0A              '#VivosEmN%C3%B3s quer usar a mem%C3%B3ria como ferramenta para mudan%C3%A7a. Se voc%C3%AA conhece ' +%0A              'algu%C3%A9m que teve a sua hist%C3%B3ria interrompida pela viol%C3%AAncia, crie aqui uma p%C3%A1gina ' +%0A              'de homenagem para se juntar %C3%A0 luta por mais respeito %C3%A0 vida.'%0A            
+memory/$%7Bmemory.id%7D%60%7D%0A            text=%7B%60Uma homenagem para @ $%7Bmemory.victimName%7D %60
 %7D%0A  
@@ -2611,33 +2611,149 @@
 ext=
-%22https://vivosemnos.org/%22
+%7B%0A                %60Uma homenagem para @ $%7Bmemory.victimName%7D %60 +%0A                %60https://vivosemnos.org/memory/$%7Bmemory.id%7D%60%0A              %7D
 %0A   

add the right link to share close #128