import { AudioOutlined } from "@ant-design/icons";
import { SearchOutlined } from '@ant-design/icons';
import {
Button,
Card,
Col,
Form,
Input,
List,
Row,
Select,
Slider,
Space,
Table,
Typography,
} from "antd";
import React, { useState } from "react";
import { Link } from "react-router-dom";
import { cardsDataExample, CategoryIO, DirectorIO, MovieIO } from "./Preview";
const { Search } = Input;
const { Option } = Select;
//TODO replace with result of input search and API call
const resultsExample: MovieIO[] = [
{
id: "789",
name: "Saw",
originalName: "Saw",
intro: "Jigsaw is the bad guy and this is the game",
picture:
"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.Jo6M-3oyAlMsB4-F__Z9bwHaHa%26pid%3DApi&f=1",
published: "1.6.2000",
runtimeMinutes: 120,
director: {
id: "123456789",
name: "Karel",
surname: "Macka",
birthdate: "20.2.1987",
},
},
{
id: "999",
name: "Saw 2",
originalName: "Saw 2",
intro: "The sequel to the first one",
picture:
"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fimages01.kaleidescape.com%2Ftransformed%2Fcovers%2F1134x1624s%2F189%2F18976008.jpg&f=1&nofb=1",
published: "1.1.2002",
runtimeMinutes: 150,
director: {
id: "123456789",
name: "Karel",
surname: "Vomacka",
birthdate: "20.2.1987",
},
},
];
//replace with api call only once
const categoriesList: CategoryIO[] = [
{
id: "123",
name: "Horror",
movies: [],
},
{
id: "1231",
name: "Comedy",
movies: [],
},
{
id: "1232",
name: "Drama",
movies: [],
},
{
id: "1234",
name: "Romcom",
movies: [],
},
{
id: "1235",
name: "Western",
movies: [],
},
{
id: "1236",
name: "Documentary",
movies: [],
},
{
id: "1237",
name: "Adam Sandler",
movies: [],
},
{
id: "1238",
name: "Czech",
movies: [],
},
];
//replace with api call only once
const directorsList: DirectorIO[] = [{
name: "Karel1",
surname: "Vomacka",
birthdate: "17.5.1979",
id: "1561",
},{
name: "Karel2",
surname: "Vomacka",
birthdate: "17.5.1979",
id: "1562",
},{
name: "Karel3",
surname: "Vomacka",
birthdate: "17.5.1979",
id: "1563",
},{
name: "Karel4",
surname: "Vomacka",
birthdate: "17.5.1979",
id: "1564",
},{
name: "Karel5",
surname: "Vomacka",
birthdate: "17.5.1979",
id: "1565",
},{
name: "Karel6",
surname: "Vomacka",
birthdate: "17.5.1979",
id: "1566",
},
]
const runtimeMarks = {
0: "0",
30: "30",
60: "60",
90: "90",
120: "120",
150: "150",
180: "180",
210: "210",
240: "240",
270: "270",
300: "300",
};
const yearMarks = {
1920: "1920",
1940: "1940",
1960: "1960",
1980: "1980",
2000: "2000",
2020: "2020",
};
//for searching movies
export const SearchPage = () => {
const [pressed, setPressed] = useState(true); //may modify or delte in future
const [searchValue, setSearch] = useState("");
//function that happens when search button is pressed
const onSearch = (value: string) => {
console.log(searchValue); // just debug tool
setPressed(true);
}; // API request search goes here - request search with value inside variable "searchValue"
//columns stays the same
const columns = [
{
title: "Name",
dataIndex: "name",
sorter: (a: MovieIO, b: MovieIO) => {
if (a.name < b.name) {
return -1;
}
if (a.name > b.name) {
return 1;
}
return 0;
},
render: (text: string, record: MovieIO) => (
<Link to={`/movie/${record.id}`}>
<a>{record.name}</a>
</Link>
),
},
{
title: "Original name",
className: "original-name",
dataIndex: "originalName",
sorter: (a: MovieIO, b: MovieIO) => {
if (a.originalName < b.originalName) {
return -1;
}
if (a.originalName > b.originalName) {
return 1;
}
return 0;
},
},
{
title: "Release Date",
dataIndex: "published",
sorter: (a: MovieIO, b: MovieIO) => {
const first = a.published.split(".").reverse();
const second = b.published.split(".").reverse();
if (first[0] > second[0]) {
return 1;
}
if (first[0] < second[0]) {
return -1;
}
if (first[1] > second[1]) {
return 1;
}
if (first[1] < second[1]) {
return -1;
}
if (first[2] > second[2]) {
return 1;
}
if (first[2] < second[2]) {
return -1;
}
return 0;
},
},
{
title: "Runtime",
dataIndex: "runtimeMinutes",
sorter: (a: MovieIO, b: MovieIO) => a.runtimeMinutes - b.runtimeMinutes,
},
{
title: "Director",
dataIndex: ["director", "surname"],
sorter: (a: MovieIO, b: MovieIO) => {
//surname has higher priority
if (a.director.surname < b.director.surname) {
return -1;
}
if (a.director.surname > b.director.surname) {
return 1;
}
if (a.director.name < b.director.name) {
return -1;
}
if (a.director.name > b.director.name) {
return 1;
}
return 0;
},
render: (text: string, record: MovieIO) => (
<Link to={`/director/${record.director.id}`}>
<a>
{record.director.name} {record.director.surname}
</a>
</Link>
),
},
];
return (
<>
<Space
direction="vertical"
style={{ display: "flex", padding: 24, textAlign: "center" }}
>
<Form>
<Row>
<Col span={6}>
<div>Name</div> <Input></Input>
</Col>
<Col span={6}>
<div>Original name</div>
<Input></Input>
</Col>
</Row>
<Col span={12}>
<div>Runtime</div>
<Slider
marks={runtimeMarks}
range={{ draggableTrack: true }}
step={10}
max={300}
defaultValue={[60, 120]}
></Slider>
</Col>
<Row>
<Col span={12}>
<div>Year published</div>
<Slider
marks={yearMarks}
range={{ draggableTrack: true }}
min={1920}
max={2022}
defaultValue={[2000, 2010]}
></Slider>
</Col>
<Col></Col>
</Row>
<Row>
<Col span={6}>
<div>Category</div>
<Select
showSearch
style={{ width: "100%" }}
placeholder="Search to Select"
optionFilterProp="children"
filterOption={(input, option) =>
(option!.children as unknown as string).includes(input)
}
filterSort={(optionA, optionB) =>
(optionA!.children as unknown as string)
.toLowerCase()
.localeCompare(
(optionB!.children as unknown as string).toLowerCase()
)
}
>
{categoriesList.map((cat: CategoryIO) => {
return <Option value={cat.id}>{cat.name}</Option>;
})}
</Select>
</Col>
<Col span={6}>
<div>Directors</div>
<Select
showSearch
style={{ width: "100%" }}
placeholder="Search to Select"
optionFilterProp="children"
filterOption={(input, option) =>
(option!.children as unknown as string).includes(input)
}
filterSort={(optionA, optionB) =>
(optionA!.children as unknown as string)
.toLowerCase()
.localeCompare(
(optionB!.children as unknown as string).toLowerCase()
)
}
>
{directorsList.map((dir:DirectorIO) => {
return(<Option value={dir.id}>{dir.name + " " + dir.surname}</Option>)
})}
</Select>
</Col>
</Row>
<Row>
<Col span={12}>
<Button style={{width: "100%"}} type="primary" icon={<SearchOutlined />} size="large">
Search
</Button>
</Col>
</Row>
</Form>
</Space>
{pressed && (
<Space
direction="vertical"
style={{ display: "flex", padding: 24, textAlign: "left" }}
>
<Table
onRow={(record, rowIndex) => {
return {
onClick: (event) => {
console.log(record.id); //remove later
},
}; //here change to view movie
}}
columns={columns}
dataSource={resultsExample}
bordered
title={() => "Results"}
/>
</Space>
)}
</>
);
};