import { AudioOutlined } from '@ant-design/icons';
import { Card, Input, List, Space, Table, Typography } from 'antd';
import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { cardsDataExample, MovieIO } from './Preview';

const { Search } = Input;






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.1.2000", runTimeMinutes : 120, director: {id: "123456789", name: "Karel", surname: "Vomacka", 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"} }
]

//for searching movies
export const SearchPage = () => {

  const [pressed, setPressed] = useState(false)

  //function that happens when search button is pressed
  const onSearch = (value: string) => {console.log(value); setPressed(true)} // API request search goes here

  const columns = [{
    title: 'Name',
    dataIndex: 'name',
    render: ( text: string, record: MovieIO) => <Link to={`/movie/${record.id}`}><a>{record.name}</a></Link>,
  }, {
    title: 'Original name',
    className: 'original-name',
    dataIndex: 'originalName',
  }, {
    title: 'Release Date',
    dataIndex: 'published',
  },{
    title: 'Runtime',
    dataIndex: 'runTimeMinutes'
  },{
    title: 'Director Surname',
    dataIndex: ["director", "surname"]
  }
];
  return (
    <>
    <Space direction="vertical" style={{ display: 'flex', padding: 24, textAlign: 'center' }}>
      <Search
        placeholder="input search text"
        allowClear
        enterButton="Search"
        size="large"
        onSearch={onSearch}
        width="400 px" />
    </Space>
    {pressed && <Space direction="vertical" style={{ display: 'flex', padding: 24, textAlign: 'left' }}>
      <Table
      onRow={(record, rowIndex) => {
        return{onClick: event => {console.log(record.id);} } //here change to view movie
      }}
    columns={columns}
    dataSource={resultsExample}
    bordered
    title={() => 'Results'}
    />

    </Space>}
    </>
  );
};