Right now when we tap on a cell, nothing happens.

So we need to provide an implementation for did select item at index path so

we can determine which filter we want to apply to the main image.

Let's navigate to photo filter controller.swift.

When you tap on a cell, that fires off a UICollectionView delegate method.

So at the bottom, right after the data source implementations,

let's create an extension of the photo filter controller class, and

conform it to UICollectionViewDelegate.

This is a delegate protocol, so we also need to assign the class acting as

a delegate, and we'll do that in viewDidLoad().

We'll say filtersCollectionView.delegate = self.

We're going to keep this really simple.

Using the indexPath, we'll figure out which filter the user's tapping on.

Now, the method again here is didSelectItemAt indexPath.

So first we need the filter, so let filter = PhotoFilter.

Dot default filters, oops, PhotoFilter.defaultFilters and

then we'll use the indexPath.row.

We need to keep track of this filter.

So, let's create another stored property.

And we'll go all the way up to the top.

Right after the photo, we'll say var selectedFilter,

and this is a type CIFilter.

That's optional, obviously, because initially,

we don't have a selected filter.

Once we get the filter now and the didSelectItem method,

we can assign it to this property.

So selectedFilter = filer.

This part is easy.

Now we need to apply this filter to the main image and this gets tricky again.

Why, well we need to apply the filter back to the main image which,

as you remember is pretty large.

Yes, it's just one filter and one image, but it is a large image and

it is going to take quite some time.

We're operating under some constraints here, and

it's worth listing out the constraints so that we have a good sense of what the are.

One, since we're building off a previous app, one of the features already in place,

is the ability to pinch and zoom into an image.

This means that the final image we save has to be a large one.

There's some wiggle room here because it doesn't have to be extremely large.

We also need to display the image without the filter initially and

then apply the filter once the user selects one.

I think the most straightforward way to solve this given our constraints

is an approach as follows.

When we pick an image, we'll hang onto a large image, but

we'll create a second copy that's cropped to fit the screen with on the filter view.

Now this is a significantly small image, and applying a filter should be faster, so

we'll display this one and use it temporarily.

Then, when we move on to the next screen, where we add tags and

a caption, while the user is working on that,

we can apply the filter to the main image in the background.

This sort of resembles what we did with the operations based approach.

We held on to the photo and we just used a much smaller one that was sized to

fit the screen to crop it and display the photo.

Now this does involve a fair bit of work re implementing this, but

we already know how to do this.

We already spent some time learning about resizing an image and

applying filter in the background using an operation.

So don't worry, I won't make you write all that code all over again.

I'll provide it in just a second.

Now before we get to that though, let's do a bit of refactoring, so we can crop

the image to fit the screen, while at the same time holding on to the main image.

Earlier when we wrote the code to resize the image by redrawing it into the rect

with a defined size, we did that right there in the lazy property.

So instead of writing those exact lines of code again,

we'll refactor that into a method in an extension of UI image.

So, let's add a new file to our helpers group, and

we'll call this UIImage+Resizing.

In here, we will start by importing the UI kit and

this is going to be a method that we call directly on an image.

So we'll add it as an extension of UI image.

We'll call this method resized to size

CGSize and this returns a UI image, an optional UI image instance.

Now, I'm following the swift naming conventions here.

Resized indicates that this is going to be a copy of the image, and

we're not going to mutate that original image.

And here we'll define a rect.

So, let rect = CGRect.

And we'll use the initializer that takes a size and a origin.

So you'll say .zero and pass in the size.

After that, we'll say UIGraphicsBeginImageContext,

with size rect.size.

This code should be familiar to you.

And then we'll say self.draw in rect,

we'll attempt to get the scaled image out.

So guard let scaledImage = UIGraphicsGetImageFromCurrentImageContext

else return nil.

This method returns an optional instance, so now if it doesn't work,

we'll go ahead and return nil.

We'll end the image context, and we'll return the scaledImage.

Okay, once we have this method, let's navigate to photo filter controller,

that's swift.

Scroll all the way up to the top.

Right now we have a reference to the photo, and

we're displaying that photo in the image view.

Instead of displaying this photo, let's define a lazy store property containing

the photo resized to fit the screen using our new method.

So we'll say lazy var displayPhoto: UIImage?

And we'll call this closure, and most of the work here is defining this size.

So first we'll unwrap the property because it's an optional.

If we don't have a photo, well, then we don't have a resize image.

So we can return nil.

Next, we need to get the current imageWidth.

Again, this should all be familiar.

So image.size.width and

the imageHeight, image.size.height.

We'll also get the screenWidth.

So UIScreen.main.bounds.

We need to figure out what the scaled ratio is between the screens width and

the images width.

So do let scaledRatio.

And this is to ensure that it fits across the entire width of the screen.

So screenWidth divided by imageWidth.

And using this now, we can get the scaled height.

So let scaledHeight = scaledRatio

times imageHeight, all right.

Okay, what is the issue here?

Main.bounds.width for the screen width.

There we go.

Okay, now let's define that size object.

So let size = CGSize.

For the width, we'll say screenWidth, for the height, we'll say scaledHeight.

And now we can return the image.resized

to the new size, which is that extension method we just wrote.

Okay, so let's modify some more code.

In here, we're displaying the main photo, inside viewed load,

let's now assign the display photo over to that photo image view.

Now, we're not going to remove the reference to the larger image though,

because we need to start an operation with that down the road.

Since the display photo is smaller, we can now apply a filter and

get a much quicker turnaround time.

We're going to hang on to the larger photo and apply the filter to that later.

At this point, we've gone through two different methods of applying a filter to

a photo, so I'm not going to make you implement it again for the third time.

In the node section, you'll find a link to an image filtration operation.swift.

This is a slightly modified version of the operation we wrote earlier, and

you can read the code to see what's going on.

Let's go ahead and add it to our project.

So in the helpers group, add a new file.

ImageFiltrationOperation, and then copy/paste that code in.

Okay, now back in photo filter controller.

Once we've obtained the filter back down here, let's start a filtration operation.

So first we need a filtration image.

Let image = FfiltrationImage.

And we're going to pass through the display photo.

Using this image, we can define an operation,

say let operation = ImageFiltrationOperation.

And like before, this class takes a filtration image and a filter.

When the operation completes,

we'll just modify the image displayed by the photo image view.

So we'll say operation.completionBlock equal, we need to assign a closure.

As always we need to check if the operation has been cancelled and

return if it has without doing any work.

Now here, once the method completes, once the operation completes,

we're simply going to jump back on to the main thread and

we're going to change the image assigned to the photo image view.

So say self.photoImageView.image =

operation.filtrationImage.image.

I'm now going to reassign this new image to the display photo property,

and that's because the next time I tap on a filter,

I want to apply this second filter back on the original image.

What I don't want is to apply the filter to an image that already has

a filter on it.

And if that happened, I would get a distorted view of what this filter looks

like and not the actual filtration operation.

Okay, to finish this up, let's go back to the top,

and we need to define our operation queue.

Right, that's the last step, so

let queue = OperationQueue.

And now back in the delegate method after the completion log,

we can say queue.addOperation(operation).

Okay, let's see what this looks like.

So now, we should quickly get that collection view with a bunch of filters

right below once we select an image.

Okay, perfect.

And now, once we tap on a cell,

we should apply the filter back to this display photo.

And there you go.

Look at that.

Let's try this black and white one.

Perfect, everything should work with minimal delay.

Now, there are several improvements you could make over here.

If you quickly tapped on every cell, we'd be firing off a bunch of operations for

absolutely no reason.

Keeping only one operation active for

the most recently tapped cell would be a less wasteful way of going about this.

So let's take a step back here.

We did a lot of work to get these filters working, and

you learned a bunch of new concepts including to new image formats.

But we still have plenty of work to do.

We still need to apply the filter back to the main image, the one that we store.

Right now we're hanging onto it with the photo property right at the top over here,

not doing anything with it.

And then on top of that this course is also about intermediate core data and

we haven't touched any of that yet.

Before we save the photos that we're creating,

we need to let the user input some information about the photos.

We'll tackle that over the next few videos.