import React from 'react';
import { graphql, gql, Helmet } from 'olymp';
import { createComponent, Grid, withColor, SchemaLoader } from 'olymp-fela';
import { Image } from 'olymp-cloudinary';
import { Blocks } from 'olymp-pages';
import { SlateMate, withBlockTypes } from 'olymp-slate';
import VCard from './vcard';
import { ImageStyles } from '../image/block';
import HeaderBlock from '../header';
import ContainerBlock from '../container';

const renderHelmet = ({ slogan, image } = {}) => {
  const meta = [];
  if (slogan) {
    meta.push({
      name: 'description',
      content: slogan,
    });
    meta.push({
      property: 'og:description',
      content: slogan,
    });
    meta.push({
      property: 'twitter:description',
      content: slogan,
    });
  }
  if (image) {
    meta.push({
      property: 'og:image',
      content: image.url,
    });
    meta.push({
      property: 'twitter:image',
      content: image.url,
    });
    meta.push({
      property: 'twitter:card',
      content: image.url,
    });
  }

  return <Helmet meta={meta} />;
};

const loaderSchema = [
  {
    height: 450,
    width: '100%',
  },
  {
    width: 'container',
    grid: [
      {
        medium: 5,
        children: [
          {
            height: 100,
          },
          {
            height: 200,
          },
          {
            height: 400,
          },
        ],
      },
      {
        medium: 7,
        height: 800,
      },
    ],
  },
];
const Label = Blocks.ImageBlockLabel.component;
const Header = HeaderBlock.component;
const Container = createComponent(
  ContainerBlock.styles,
  ContainerBlock.component,
  p => Object.keys(p)
);
const Slate = withBlockTypes(props => <SlateMate {...props} />);

const Content = createComponent(
  ({ theme }) => ({
    width: '100%',
    paddingX: theme.space5,
    '& img': {
      borderRadius: theme.borderRadius,
    },
    ifSmallDown: {
      paddingX: theme.space3,
    },
  }),
  p => <Grid.Item medium={7} {...p} />,
  p => Object.keys(p)
);

const Peak = createComponent(
  props => ({
    ...ImageStyles(props),
    marginBottom: props.theme.space3,
  }),
  ({ className, header, subheader, value, title }) =>
    (<div className={className}>
      <Image
        value={value}
        alt={title}
        width="100%"
        maxHeight={450}
        maxResolution={750000}
      />
      {(header || subheader) &&
        <Label>
          <h1>
            {header}
          </h1>
          <p>
            {subheader}
          </p>
        </Label>}
    </div>),
  p => Object.keys(p)
);

const component = withColor(
  ({ item }) => item.farbe
)(({ className, attributes, item }) =>
  (<SchemaLoader isLoading={!item.name} schema={loaderSchema}>
    <div>
      {renderHelmet(item)}
      {item.image
        ? <Peak
          title={item.name || item.titel}
          value={item.image}
          header={item.slogan}
          subheader={item.willkommen}
          color={item.farbe}
        />
        : <Header subheader={item.willkommen} color={item.farbe}>
          {item.slogan}
        </Header>}
      <Container className={className} color={item.farbe} {...attributes}>
        <Grid>
          <Grid.Item medium={5}>
            <VCard org={item} />
          </Grid.Item>
          <Content>
            <Slate readOnly value={item.text} />
            {/* children*/}
          </Content>
        </Grid>
      </Container>
    </div>
  </SchemaLoader>)
);

const componentWithData = graphql(
  gql`
    query einrichtung($id: String) {
      item: einrichtung(id: $id) {
        id
        name
        title
        art
        farbe
        slug
        slogan
        willkommen
        etage
        freifeld
        openings
        eMail
        fax
        telefon
        telefonPrivat
        website
        image {
          url
          crop
          width
          height
          caption
          source
        }
        logo {
          url
          crop
          width
          height
          caption
          source
        }
        fachrichtungen
        tags
        aesthetik {
          id
          link
          name
          text
        }
        vorsorgen {
          id
          link
          name
          text
        }
        leistungen {
          id
          link
          name
          text
        }
        prophylaxen {
          id
          link
          name
          text
        }
        personen {
          id
          name
          beschreibung
          bild {
            url
            crop
            width
            height
            caption
            source
          }
          telefon
          fax
          eMail
          text
        }
        text
      }
    }
  `,
  {
    options: ({ editor }) => ({
      variables: {
        id: editor.props.bindingId || 'BJuOod57-',
      },
    }),
    props: ({ ownProps, data }) => ({
      ...ownProps,
      data,
      item: data.item || {},
    }),
  }
)(component);

export default {
  key: 'GZK.Collections.OrgBlock',
  label: 'Einrichtung',
  category: 'Collections',
  editable: false,
  component: componentWithData,
};

@@ -473,16 +473,22 @@
 n, image
+, logo
  %7D = %7B%7D)
@@ -777,16 +777,45 @@
   %7D%0A
+  const img = logo %7C%7C image;%0A
   if (im
 age)
@@ -810,19 +810,17 @@
   if (im
-age
+g
 ) %7B%0A    
@@ -868,35 +868,33 @@
      content: im
-age
+g
 .url,%0A    %7D);%0A  
@@ -949,35 +949,33 @@
      content: im
-age
+g
 .url,%0A    %7D);%0A  
@@ -1037,19 +1037,17 @@
 tent: im
-age
+g
 .url,%0A  
@@ -3478,16 +3478,18 @@
 oader%3E)%0A
+  
 );%0A%0Acons

use org logo as meta img