import React, { createElement as e } from 'react'
import Radium from 'radium'

import { connect } from 'react-redux'

import { pickState, updateExample } from './state'

import Excercise from './Excercise'
import Textarea from './Textarea'

import 'normalize.css/normalize.css'
import './boxSizing.css'

const Intro = () => <div>
  <h1>Как принимать решения</h1>

  <p>
    Что это такое и зачем мне это?  Перед вами упражнение на прикладную
    рациональность. Если вы хотите повысить качество жизни за счет
    принятия правильных решений, стать более уверенным в своих решениях –
    оно для вас.

    Мы подготовили упражнение на основе книги Decisive: How to Make
    Better Choices in Life and Work (Chip Heath & Dan Heath)
    http://www.goodreads.com/book/show/15798078-decisive
  </p>

  <p> Мы не стали включать в упражнение классические аналитические методы
    принятия решений вроде квадрата Декарта. Вместо этого, в соответствии
    с тематикой сообщества LessWrong, мы собрали методы, которые
    противодействуют распространенным ошибкам мышления и которые можно
    применить "на ходу".
  </p>

  <p> Не все методы будут полезны всегда. Мы рассчитываем, что для
    каждого решения пригодятся в среднем от нуля до двух методов.
    Несмотря на это мы считаем упражнение полезным — небольшая, но
    регулярная польза от всех решений в будущем (с учетом риска, что это
    упражнение окажется бесполезным для вас) перевешивает разовые затраты
    времени на само упражнение.
  </p>

  <p> Мы заметили, что разные люди уделяют разное количество внимания
    принятию решений. Кто-то агонизирует над выбором сиропа для кофе,
    кто-то решает поменять работу во время утренней чистки зубов. Мы
    готовили, упражнение в первую очередь для людей из первой категории,
    но надеемся, что люди из второй категории тоже смогут увеличить
    пользу от принятых решений.
  </p>

</div>

const excercises = [
  e(Excercise, {
    id: 'goals',
    title: 'Цели',
    action: 'Подумайте о целях',
    example: [
      <p>
        В какой ресторан пойти сегодня вечером на свидание? <br />
        Если ваша цель – вкусно поесть и провести время вместе, можно не
        идти в ресторан и приготовить (или заказать) что-нибудь дома. <br />
        Если ваша цель – смена обстановки и романтическая атмосфера, можно
        рассмотреть прогулку в парке.
      </p>
    ],
    instruction: [
      <p>
        Подумайте о ваших целях, какие еще есть способы достичь их с теми
        же ресурсами?
      </p>,
      <p>
        Возьмите один или несколько примеров, которые вы записали выше,
        запишите несколько ваших целей, а затем придумайте другие способы
        достичь эти цели.
      </p>
    ]
  }),

  e(Excercise, {
    id: 'restrictions',
    title: 'Ограничения',
    action: 'Проверьте ограничения',
    example: [
      <p>
        В Москву можно попасть на самолете, возможно на нужную дату есть
        дешевые билеты
      </p>,
      <p>
        Не обязательно жить в отеле, можно рассмотреть съемные квартиры
        или couchsurfing
      </p>
    ],
    instruction: [
      <p>
        Подумайте о "закешированных" ограничениях. Проверьте ограничения,
        которые определяют доступные вам варианты. Какие варианты вы
        ошибочно считаете не подходящими?
      </p>,
      <p>
        Постарайтесь отключить "внутреннего критика", когда думаете об
        альтернативных вариантах.
      </p>,
      <p>
        Возьмите один или несколько примеров, которые вы записали выше,
        запишите несколько ограничений, определяющих доступные вам
        варианты, а затем придумайте, как обойти эти ограничения.
      </p>
    ]
  }),

  e(Excercise, {
    id: 'quantification',
    title: 'Количественная оценка',
    action: 'Получите количественную оценку',
    example: [
      <p>
        Самый распространенный пример — рейтинги отелей, поездов, ресторанов
        и т.д.
      </p>,
      <p>
        Другой пример:
        2) Для материалов курток возможно найти количественные данные о
        теплоте материалов и сопоставить их с ценой
      </p>
    ],
    instruction: [
      <p>
        Получите количественную оценку вариантов решения
      </p>,
      <p>
        Запишите несколько количественных характеристик для вариантов вашего решения.
      </p>
    ]
  }),

  e(Excercise, {
    id: 'confirmationBias',
    title: 'Confirmation bias',
    action: 'Ищите опровержение, а не подтверждение',
    example: [
      <p>
        Если вам нравится определенный отель, поищите отрицательные
        отзывы о нем
      </p>
    ],

    instruction: [
      <p>
        Избегайте Confirmation bias, активно ищите информацию, которая
        может опровергнуть ваши убеждения.
      </p>,
      <p>
        Запишите несколько контр-аргументов для вариантов вашего решения.
      </p>
    ]
  }),

  e(Excercise, {
    id: 'externalFactors',
    title: 'Внешнее влияние',
    action: 'Избавьтесь от внешнего влияния',
    example: [
      <p>
        1) Не выбирайте ресторан стоя на шумной улице, зайдите в ближайшее кафе
        3) Попросите консультанта в магазине дать вам время, чтобы подумать
      </p>
    ],

    instruction: [
      <p>
        Сиюминутные эмоции и внешние факторы мешают принимать решения,
        постарайтесь их устранить. Самый распространенный фактор — ложная
        срочность.
      </p>,
      <p>
        Запишите, какие внешние факторы могут помешать вам в ваших примерах
        решений.
      </p>
    ]
  }),

  e(Excercise, {
    id: 'outsideView',
    title: 'Взгляд снаружи',
    action: 'Посмотрите на ситуацию снаружи',
    example: [
      <p>
        Посмотрите на ситуацию "снаружи" — вместо того, чтобы думать о вашей
        конкретной ситуации, подумайте, что обычно происходит в похожих
        ситуациях. Представьте, что вы даете совет вашему другу.
        4) Обычно самый дешевый отель оказывается очень плохим
      </p>
    ],

    instruction: [
      <p>
        Запишите, что бы вы посоветовали вашему другу в похожей ситуации
      </p>
    ]
  }),

  e(Excercise, {
    id: 'failurePlan',
    title: 'Подготовка к провалу',
    action: 'Подготовьте "План Б"',
    example: [
      <p>
        1) Выберите не один, а несколько ресторанов, на случай, если
        выбранный ресторан будет закрыт или переполнен <br />
        2) Подумайте о возможности обмена, возврата или продажи купленной
        вещи <br />
      </p>
    ],

    instruction: [
      <p>
        Придумайте "План Б" для вашего примера
      </p>
    ]
  }),

  e(Excercise, {
    id: 'premortem',
    title: 'Премортем',
    action: 'Проведите премортем',
    example: [
      <p>
        3) — Ехать ночным поездом оказалось очень плохой идеей
        — Наверняка из-за того, что я не выспался! Нужно взять беруши и
        маску или выбрать дневной поезд
      </p>
    ],

    instruction: [
      <p>
        Проконсультируйтесь с интуицией, проведя "премортем". Представьте,
        вам позвонили из будущего и сказали, что решение было провальным.
        Если вы ощущаете удивление — ваш план хорош. Если вы сразу сказали,
        почему — вы нашли потенциальную причину провала, устраните ее.
      </p>,
      <p>
        Проведите пре-мортем для вашего примера, то есть запишите причины,
        которые приходят вам на ум, когда вы представляете, что ваш решение
        провалилось
      </p>
    ]
  })
].map(e => React.cloneElement(e, {key: e.props.id}))

const columns = {
  display: 'flex',
  margin: '0 -0.5em'
}

const column = {
  width: '50%',
  padding: '0 0.5em'
}

const exampleStyle = {
  margin: '-0.5em',
  padding: '0.5em',
  backgroundColor: '#eee'
}

const Example = Radium(connect(pickState('example'))(({dispatch, example}) =>
  <div>
    <h2>Выберите решение</h2>
    <p>
      Методы хорошо работают для повседневных решений, когда нужно выбирать из
      нескольких альтернатив.  Плохо подходят решения, связанные с акразией или
      избеганием (отложить ли что-нибудь на потом, сделать ли что-то, что нужно
      сделать, но вы не хотите), также не подходят открытые решения (когда нет
      списка вариантов).
    </p>
    <div style={columns}>
      <div style={column}>
        <h3>Действие</h3>
        <p>
          Выберите решения, которые вам нужно будет принять в ближайшем
          будущем. Можно выбрать уже совершенные решения, в которых вы были
          неуверены или которые оказались неверны. Проверьте, что вы не
          записали примеры, связанные с акразией или избеганием.
        </p>
        <Textarea
          onChange={e => dispatch(updateExample(e.target.value))}
          value={example}
        />
        <i>{example}</i>
      </div>
      <div style={column}>

        <h3>Примеры</h3>

        <p style={exampleStyle}>
          В какой ресторан пойти сегодня вечером на свидание?
        </p>
        <p style={exampleStyle}>
          Какую зимнюю куртку выбрать в магазине?
        </p>
        <p style={exampleStyle}>
          Ехать в Москву дневным или ночным поездом?
        </p>
        <p style={exampleStyle}>
          В каком отеле остановиться во время отпуска?
        </p>
      </div>
    </div>
  </div>
))

const actions = (excercises) => {
  const items = excercises.map(e =>
    <li key={e.props.id}>{e.props.action}</li>
  )
  return <ol>{items}</ol>
}

const textStyle = {
  fontFamily: 'sans-serif',
  width: '75ch',
  margin: 'auto'
}

export default Radium(() =>
  <div style={textStyle}>
    <Intro />

    <Example />

    {excercises}

    <h2>Что дальше?</h2>
    <p>
      Запишите или сохраните чеклист для принятия решений, так, чтобы он
      был у вас с собой:
    </p>
    {actions(excercises)}
    <p>
    Убедитесь, что вы понимаете, что нужно делать в каждом из пунктов
    (непонятные или не понравившиеся пункты можно убрать).
  </p>
    <p>
    Вспомните ощущение "нерешительности", которое вы испытывали при
    принятии трудного решения. Постарайтесь представить это ощущение, а
    затем представьте, что вы открываете чеклист.
    Представление конкретных ощущений поможет вам вспомнить об этих
    техниках в нужный момент.
  </p>
  </div>
)
