diff --git a/src/const.js b/src/const.js
index f18646e..5ecd470 100644
--- a/src/const.js
+++ b/src/const.js
@@ -1,5 +1,5 @@
 const POINT_TYPE = ['taxi', 'bus', 'train', 'ship', 'drive', 'flight', 'check-in', 'sightseeing', 'restaurant'];
-const CITIES = ['Amsterdam', 'Geneva', 'Chamonix', ];
+const CITIES = ['Amsterdam', 'Geneva', 'Chamonix', 'Moscow', 'Paris'];
 const DESCRIPTIONS = [
   'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
   'Cras aliquet varius magna, non porta ligula feugiat eget.',
diff --git a/src/mock/offers.js b/src/mock/offers.js
index 8768c6c..a064aad 100644
--- a/src/mock/offers.js
+++ b/src/mock/offers.js
@@ -9,6 +9,11 @@ const offers = [
         id: 'of1',
         title: 'Upgrade',
         price: getRandomInteger(MIN_PRICE, MAX_PRICE)
+      },
+      {
+        id: 'of0',
+        title: 'NoCheked',
+        price: 0
       }]
   },
   {
@@ -28,7 +33,21 @@ const offers = [
         title: 'First Class',
         price: getRandomInteger(MIN_PRICE, MAX_PRICE)
       }]
-  }
+  },
+  {
+    type: 'train',
+    offers: [
+      {
+        id: 'of8765',
+        title: 'Upgrade',
+        price: getRandomInteger(MIN_PRICE, MAX_PRICE)
+      },
+      {
+        id: 'of34567654',
+        title: 'NoCheked',
+        price: 0
+      }]
+  },
 ];
 
 export {offers};
diff --git a/src/model/destinations-model.js b/src/model/destinations-model.js
index c06f0c3..f67c083 100644
--- a/src/model/destinations-model.js
+++ b/src/model/destinations-model.js
@@ -10,4 +10,8 @@ export default class DestinationsModel {
   getDestinationById(id){
     return this.#destinations.find((destination) => destination.id === id);
   }
+
+  getDestinationByName(name){
+    return this.#destinations.find((destination) => destination.name === name);
+  }
 }
diff --git a/src/model/offers-model.js b/src/model/offers-model.js
index 4c888be..5242272 100644
--- a/src/model/offers-model.js
+++ b/src/model/offers-model.js
@@ -10,4 +10,8 @@ export default class OffersModel {
   getOfferByType(type){
     return this.#offers.find((offer) => offer.type === type);
   }
+
+  getOfferById(id){
+    return this.#offers.find((offer) =>offer.id === id);
+  }
 }
diff --git a/src/presenter/trip-events-presenter.js b/src/presenter/trip-events-presenter.js
index b47c537..fda9b74 100644
--- a/src/presenter/trip-events-presenter.js
+++ b/src/presenter/trip-events-presenter.js
@@ -5,7 +5,7 @@ import ListEmptyView from '../view/list-empty-view.js';
 import TripPointPresenter from './trip-point-presenter.js';
 import {render} from '../framework/render.js';
 import {LIST_EMPTY_TEXT} from '../const.js';
-import { calculateDateDifference } from '../util.js';
+import { calculateDateDifference, updateItem } from '../util.js';
 
 
 export default class TripEventsPresenter {
@@ -47,12 +47,10 @@ export default class TripEventsPresenter {
     }
   }
 
-  #changePointFavorite = (point) => {
-    this.#points = this.#points.map((element) => element.id === point.id ? point : element);
+  #handlePointChange = (updatedPoint) => {
+    this.#points = updateItem(this.#points, updatedPoint);
 
-    const destination = this.#destinationsModel.getDestinationById(point.destination);
-    const offer = this.#offersModel.getOfferByType(point.type);
-    this.#pointPresenters.get(point.id).init(point, destination, offer);
+    this.#pointPresenters.get(updatedPoint.id).init(updatedPoint);
   };
 
   #changeSortType = (type) => {
@@ -109,10 +107,8 @@ export default class TripEventsPresenter {
 
     for (let i = 0; i < points.length; i++) {
       const point = points[i];
-      const destination = this.#destinationsModel.getDestinationById(point.destination);
-      const offer = this.#offersModel.getOfferByType(point.type);
-      const pointPresenter = new TripPointPresenter(this.#listComponent.element, this.#changePointFavorite, this.#changeViewHandler);
-      pointPresenter.init(point, destination, offer);
+      const pointPresenter = new TripPointPresenter(this.#listComponent.element, this.#changeViewHandler, this.#handlePointChange, this.#offersModel, this.#destinationsModel);
+      pointPresenter.init(point);
       this.#pointPresenters.set(point.id, pointPresenter);
     }
   };
diff --git a/src/presenter/trip-point-presenter.js b/src/presenter/trip-point-presenter.js
index 7016325..2c02009 100644
--- a/src/presenter/trip-point-presenter.js
+++ b/src/presenter/trip-point-presenter.js
@@ -11,25 +11,34 @@ const VIEW = {
 
 export default class TripPointPresenter {
   #pointContainer = null;
-  #onFavoriteChange = null;
   #onViewChange = null;
+  #onDataChange = null;
 
   #pointComponent = null;
   #editPointComponent = null;
 
+  #offersModel = null;
+  #destinationsModel = null;
+
   #point = null;
 
   #view = VIEW.DEFAULT;
 
-  constructor(pointContainer, onFavoriteChange, onViewChange) {
+  constructor(pointContainer, onViewChange, onDataChange, offersModel, destinationsModel) {
     this.#pointContainer = pointContainer;
-    this.#onFavoriteChange = onFavoriteChange;
     this.#onViewChange = onViewChange;
+    this.#onDataChange = onDataChange;
+
+    this.#offersModel = offersModel;
+    this.#destinationsModel = destinationsModel;
   }
 
-  init(point, destination, offer) {
+  init(point) {
     this.#point = point;
 
+    const destination = this.#destinationsModel.getDestinationById(this.#point.destination);
+    const offer = this.#offersModel.getOfferByType(this.#point.type);
+
     const prevPointComponent = this.#pointComponent;
 
     this.#pointComponent = new PointView({
@@ -46,7 +55,9 @@ export default class TripPointPresenter {
       offer,
       onDeleteButtonClick: this.#deleteButtonClikHandler,
       onSubmitForm: this.#submitFormHandler,
-      onRollupButtonClick: this.#formRollupButtonClikHandler
+      onRollupButtonClick: this.#formRollupButtonClikHandler,
+      getDestinationByName: this.#getDestinationByName,
+      getOfferByType : this.#getOfferByType
     });
 
     if (prevPointComponent !== null && this.#pointContainer.contains(prevPointComponent.element)) {
@@ -58,7 +69,7 @@ export default class TripPointPresenter {
   }
 
   #favoriteButtonClickHandler = () => {
-    this.#onFavoriteChange({...this.#point, isFavorite: !this.#point.isFavorite});
+    this.#onDataChange({...this.#point, isFavorite: !this.#point.isFavorite});
   };
 
   #replacePointToForm() {
@@ -93,7 +104,8 @@ export default class TripPointPresenter {
     document.removeEventListener('keydown', this.#onFormKeydown);
   };
 
-  #submitFormHandler = () => {
+  #submitFormHandler = (point) => {
+    this.#onDataChange(point);
     this.#replaceFormToPoint();
     document.removeEventListener('keydown', this.#onFormKeydown);
   };
@@ -109,4 +121,8 @@ export default class TripPointPresenter {
       this.#replaceFormToPoint();
     }
   };
+
+  #getOfferByType = (type) => this.#offersModel.getOfferByType(type);
+
+  #getDestinationByName = (name) => this.#destinationsModel.getDestinationByName(name);
 }
diff --git a/src/util.js b/src/util.js
index a0e958f..378877a 100644
--- a/src/util.js
+++ b/src/util.js
@@ -19,6 +19,10 @@ function createId() {
   };
 }
 
+function updateItem(items, update) {
+  return items.map((item) => item.id === update.id ? update : item);
+}
+
 function getRandomInteger(a, b) {
   const lower = Math.ceil(Math.min(a, b));
   const upper = Math.floor(Math.max(a, b));
@@ -33,10 +37,10 @@ function calculateDateDifference(start, end) {
   return end.diff(start, 'minute');
 }
 
-const isElementHas = (element) => element.length > 0;
+const isElementHas = (element) => element !== null && element !== undefined && element.length > 0;
 
 const getRandomArrayElement = (arr) => arr[getRandomInteger(0, arr.length - 1)];
 
 const isEscapeKey = (evt) => evt.key === 'Escape';
 
-export {createId, getRandomInteger, getRandomArrayElement, formatEventDate, isElementHas, isEscapeKey, calculateDateDifference, formatEventDuration};
+export {createId, getRandomInteger, getRandomArrayElement, formatEventDate, isElementHas, isEscapeKey, calculateDateDifference, formatEventDuration, updateItem};
diff --git a/src/view/editable-point-view.js b/src/view/editable-point-view.js
index 019f43b..53be7f4 100644
--- a/src/view/editable-point-view.js
+++ b/src/view/editable-point-view.js
@@ -1,11 +1,11 @@
-import { POINT_TYPE } from '../const.js';
+import { POINT_TYPE, CITIES } from '../const.js';
 import { formatEventDate, isElementHas } from '../util.js';
-import AbstractView from '../framework/view/abstract-view.js';
+import AbstractStatefulView from '../framework/view/abstract-stateful-view.js';
 
 const DATE_FORMAT = 'DD/MM/YY HH:mm';
 
-function createEditablePointTemplate(point, destination, offer) {
-  const type = point.type;
+function createEditablePointTemplate(state) {
+  const type = state.type;
   return(
     `<li class="trip-events__item">
     <form class="event event--edit" action="#" method="post">
@@ -29,20 +29,18 @@ function createEditablePointTemplate(point, destination, offer) {
           <label class="event__label  event__type-output" for="event-destination-1">
             ${type[0].toUpperCase() + type.slice(1)}
           </label>
-          <input class="event__input  event__input--destination" id="event-destination-1" type="text" name="event-destination" value="${destination.name}" list="destination-list-1">
+          <input class="event__input  event__input--destination" id="event-destination-1" type="text" name="event-destination" value="${state.name}" list="destination-list-1">
           <datalist id="destination-list-1">
-            <option value="Amsterdam"></option>
-            <option value="Geneva"></option>
-            <option value="Chamonix"></option>
+            ${createDestinationsList()}
           </datalist>
         </div>
 
         <div class="event__field-group  event__field-group--time">
           <label class="visually-hidden" for="event-start-time-1">From</label>
-          <input class="event__input  event__input--time" id="event-start-time-1" type="text" name="event-start-time" value="${formatEventDate(point.dateFrom, DATE_FORMAT)}">
+          <input class="event__input  event__input--time" id="event-start-time-1" type="text" name="event-start-time" value="${formatEventDate(state.point.dateFrom, DATE_FORMAT)}">
           &mdash;
           <label class="visually-hidden" for="event-end-time-1">To</label>
-          <input class="event__input  event__input--time" id="event-end-time-1" type="text" name="event-end-time" value="${formatEventDate(point.dateTo, DATE_FORMAT)}">
+          <input class="event__input  event__input--time" id="event-end-time-1" type="text" name="event-end-time" value="${formatEventDate(state.point.dateTo, DATE_FORMAT)}">
         </div>
 
         <div class="event__field-group  event__field-group--price">
@@ -50,7 +48,7 @@ function createEditablePointTemplate(point, destination, offer) {
             <span class="visually-hidden">Price</span>
             &euro;
           </label>
-          <input class="event__input  event__input--price" id="event-price-1" type="text" name="event-price" value="${point.basePrice}">
+          <input class="event__input  event__input--price" id="event-price-1" type="text" name="event-price" value="${state.point.basePrice}">
         </div>
 
         <button class="event__save-btn  btn  btn--blue" type="submit">Save</button>
@@ -60,20 +58,20 @@ function createEditablePointTemplate(point, destination, offer) {
         </button>
       </header>
       <section class="event__details">
-        ${isElementHas(offer.offers) ? `<section class="event__section  event__section--offers">
+        ${state.isOffers ? `<section class="event__section  event__section--offers">
           <h3 class="event__section-title  event__section-title--offers">Offers</h3>
           <div class="event__available-offers">
-            ${createOffersList(offer)}` : ''}
+            ${createOffersList(state.offer, state.point.offers)}` : ''}
           </div>
         </section>
 
-        ${(isElementHas(destination.description) ||
-          isElementHas(destination.pictures)) ? `<section class="event__section  event__section--destination">
+        ${state.isDestination ||
+          state.isPictures ? `<section class="event__section  event__section--destination">
             <h3 class="event__section-title  event__section-title--destination">Destination</h3>` : ''}
 
-            ${isElementHas(destination.description) ? `<p class="event__destination-description">${destination.description}</p>` : ''}
-            ${isElementHas(destination.pictures) ? `<div class="event__photos-container">
-              <div class="event__photos-tape">${createDestinationPhotosList(destination.pictures)}</div>` : ''}
+            ${state.isDestination ? `<p class="event__destination-description">${state.destination?.description}</p>` : ''}
+            ${state.isPictures ? `<div class="event__photos-container">
+              <div class="event__photos-tape">${createDestinationPhotosList(state.destination?.pictures)}</div>` : ''}
         </section>
       </section>
     </form>
@@ -81,12 +79,12 @@ function createEditablePointTemplate(point, destination, offer) {
   );
 }
 
-function createDestinationPhotosList(pictures){
+function createDestinationPhotosList(pictures) {
   const photosList = pictures.map((picture) => `<img class="event__photo" src=${picture.src} alt=${picture.description}>`);
   return photosList.join('');
 }
 
-function createEventTypeList(type){
+function createEventTypeList(type) {
   const eventTypeList = POINT_TYPE.map((pointType) => `<div class="event__type-item">
     <input id="event-type-${pointType}-1" class="event__type-input  visually-hidden" type="radio" name="event-type" value="${pointType}">
     <label class="event__type-label  event__type-label--${pointType}" for="event-type-${pointType}-1">${pointType[0].toUpperCase() + pointType.slice(1)} ${pointType === type ? 'checked' : ''}</label>
@@ -94,12 +92,18 @@ function createEventTypeList(type){
   return eventTypeList.join('');
 }
 
-function createOffersList(offer){
+function createDestinationsList() {
+  const destinationsList = CITIES.map((city) => `<option value=${city}></option>`);
+  return destinationsList.join('');
+}
+
+function createOffersList(offer, pointOffers) {
   const offerList = offer.offers.map((offerItem) => {
     const offerName = offerItem.title.replace(' ', '').toLowerCase();
+    const isCheked = pointOffers.find((id) => id === offerItem.id) !== undefined;
 
     return `<div class="event__offewar-selector">
-    <input class="event__offer-checkbox  visually-hidden" id="event-offer-${offerName}-1" type="checkbox" name="event-offer-${offerName}" checked>
+    <input class="event__offer-checkbox  visually-hidden" id="event-offer-${offerName}-1" type="checkbox" name="event-offer-${offerName}" ${isCheked ? 'checked' : ''}>
     <label class="event__offer-label" for="event-offer-${offerName}-1">
     <span class="event__offer-title">${offerItem.title}</span>
     &plus;&euro;&nbsp;
@@ -110,23 +114,34 @@ function createOffersList(offer){
   return offerList.join('');
 }
 
-export default class EditablePointView extends AbstractView {
+export default class EditablePointView extends AbstractStatefulView {
   #point = null;
   #destination = null;
   #offer = null;
   #onSubmitForm = null;
   #onDeleteButtonClick = null;
   #onRollupButtonClick = null;
+  #getOfferByType = null;
+  #getDestinationByName = null;
 
-  constructor ({point, destination, offer, onDeleteButtonClick, onSubmitForm, onRollupButtonClick}){
+
+  constructor ({point, destination, offer, onDeleteButtonClick, onSubmitForm, onRollupButtonClick, getDestinationByName, getOfferByType}){
     super();
-    this.#point = point;
-    this.#destination = destination;
-    this.#offer = offer;
+    this._setState(EditablePointView.parsePointToState(point, destination, offer));
     this.#onDeleteButtonClick = onDeleteButtonClick;
     this.#onSubmitForm = onSubmitForm;
     this.#onRollupButtonClick = onRollupButtonClick;
+    this.#getDestinationByName = getDestinationByName;
+    this.#getOfferByType = getOfferByType;
 
+    this._restoreHandlers();
+  }
+
+  get template() {
+    return createEditablePointTemplate(this._state);
+  }
+
+  _restoreHandlers() {
     this.element.querySelector('.event--edit')
       .addEventListener('submit', this.#submitFormHandler);
 
@@ -135,10 +150,42 @@ export default class EditablePointView extends AbstractView {
 
     this.element.querySelector('.event__rollup-btn')
       .addEventListener('click', this.#rollupButtonClickHandler);
+
+    this.element.querySelectorAll('.event__type-input').
+      forEach((input) => input.addEventListener('click', this.#typeInputHandler));
+    this.element.querySelector('.event__input--destination').
+      addEventListener('change', this.#destinationInputHandler);
   }
 
-  get template() {
-    return createEditablePointTemplate(this.#point, this.#destination, this.#offer);
+  static parsePointToState(point, destination, offer) {
+    return{
+      point,
+      offer,
+      destination,
+      type: point.type,
+      name: destination.name,
+      isOffers: isElementHas(offer.offers),
+      isDestination: isElementHas(destination.description),
+      isPictures: isElementHas(destination.pictures),
+    };
+  }
+
+  static parseStateToPoint(state) {
+    const point = state.point;
+
+    return point;
+  }
+
+  static parseStateToOffer(state) {
+    const offer = state.offer;
+
+    return offer;
+  }
+
+  static parseStateToDestination(state) {
+    const destination = state.destination;
+
+    return destination;
   }
 
   #deleteButtonClickHandler = (evt) => {
@@ -148,11 +195,32 @@ export default class EditablePointView extends AbstractView {
 
   #submitFormHandler = (evt) => {
     evt.preventDefault();
-    this.#onSubmitForm();
+    this.#onSubmitForm(EditablePointView.parseStateToPoint(this._state));
   };
 
   #rollupButtonClickHandler = (evt) => {
     evt.preventDefault();
     this.#onRollupButtonClick();
   };
+
+  #typeInputHandler = (evt) => {
+    evt.preventDefault();
+    const newOffers = this.#getOfferByType(evt.target.value);
+    this.updateElement({
+      offer: newOffers,
+      isOffers: isElementHas(newOffers.offers),
+      type: newOffers.type
+    });
+  };
+
+  #destinationInputHandler = (evt) => {
+    evt.preventDefault();
+    const newDestination = this.#getDestinationByName(evt.target.value);
+    this.updateElement({
+      destination: newDestination,
+      name: evt.target.value,
+      isDestination: isElementHas(newDestination?.description),
+      isPictures: isElementHas(newDestination?.pictures),
+    });
+  };
 }
diff --git a/src/view/point-view.js b/src/view/point-view.js
index 47c9392..73953de 100644
--- a/src/view/point-view.js
+++ b/src/view/point-view.js
@@ -30,7 +30,7 @@ function createPointTemplate(point, city, offer) {
         </p>
         ${isElementHas(offer.offers) ? `<h4 class="visually-hidden">Offers:</h4>
           <ul class="event__selected-offers">
-            ${createOffersTemplate(offer)}
+            ${createOffersTemplate(offer, point.offers)}
         </ul>` : ''}
         <button class="event__favorite-btn ${point.isFavorite ? 'event__favorite-btn--active' : ''}" type="button">
           <span class="visually-hidden">Add to favorite</span>
@@ -46,15 +46,16 @@ function createPointTemplate(point, city, offer) {
   );
 }
 
-function createOffersTemplate(offer) {
-  const offersList = offer.offers.map((offerItem) => `<li class="event__offer">
+function createOffersTemplate(offer, pointOffers) {
+  const offersList = offer.offers.map((offerItem) => {
+    const isCheked = pointOffers.find((id) => id === offerItem.id) !== undefined;
+    return isCheked ? `<li class="event__offer">
        <span class="event__offer-title">${offerItem.title}</span>
        &plus;&euro;&nbsp;
        <span class="event__offer-price">${offerItem.price}</span>
-       </li>`);
+       </li>` : '';});
   return offersList.join('');
 }
-
 export default class PointView extends AbstractView{
   #point = null;
   #city = null;