import React, { useEffect, useState, useRef } from 'react';
import { Button, List, Popconfirm, Select } from 'antd';
import classNames from 'classnames';
import { getPackageDetailList, addPackageDetail, deletePackageDetail } from '@/services/package';
import { getDishList } from '@/services/dish';

const { Option } = Select;

const Header = props => {
  const { onChange } = props;
  const [data, setData] = useState([]);
  const [value, setValue] = useState();

  const handleSearch = (newValue) => {
    if (newValue) {
      getDishList({ name: newValue, pageNum: 1, pageSize: 100 }).then(res => {
        setData(res.records || []);
      });
    } else {
      setData([]);
    }
  };

  const handleChange = (newValue) => {
    setValue(newValue);
    if (newValue) {
      onChange(data.filter(x => x.id === newValue)[0]);
    }
  };

  const options = data.map(d => <Option key={d.id} value={d.id}>{d.name}</Option>);

  const initList = () => {
    getDishList({ pageNum: 1, pageSize: 10 }).then(res => {
      setData(res.records || []);
    });
  }

  useEffect(() => {
    initList();
  }, [])

  return (
    <Select
      style={{ width: '100%' }}
      allowClear
      showSearch
      value={value}
      placeholder='请选择菜肴'
      defaultActiveFirstOption={false}
      showArrow={false}
      filterOption={false}
      onSearch={handleSearch}
      onChange={handleChange}
      notFoundContent={null}
      onClear={initList}
    >
      {options}
    </Select>
  );
}


export default (props) => {
  const { current, setCurrent } = props;

  const packageId = (current || {}).id;

  const [loading, setLoading] = useState(false);
  const [list, setList] = useState([]);
  const [detail, setDetail] = useState({});
  const listRef = useRef();
  listRef.current = list;

  const onAdd = item => {
    setLoading(true);
    addPackageDetail({ packageId, dishId: item.id }).then(res => {
      setLoading(false);
      const newList = listRef.current.concat(res);
      setList(newList);
    }).catch(() => {
      setLoading(false);
    });
  }

  const onDelete = item => {
    setLoading(true);
    deletePackageDetail({ packageId, dishId: item.id }).then(res => {
      setLoading(false);
      const newList = listRef.current.filter(x => x.id !== item.id);
      setList(newList);
    }).catch(() => {
      setLoading(false);
    });
  }

  useEffect(() => {
    if (!packageId) return;

    setLoading(true);
    getPackageDetailList({ packageId, pageNum: 1, pageSize: 500 }).then(res => {
      setLoading(false);
      setList(res.records || []);
      setDetail((res.records || [])[0] || {});
    }).catch(() => {
      setLoading(false);
    });

  }, [packageId]);

  return (
    <List
      style={{ minHeight: '300px' }}
      header={<Header onChange={onAdd} />}
      bordered
      loading={loading}
      dataSource={list}
      renderItem={item => (
        <List.Item
          className={classNames({ active: detail.id === item.id })}
          onClick={() => setDetail(item)}
          actions={[
            <Popconfirm
              key="delete"
              title="确认删除?"
              onConfirm={() => onDelete(item)}
              >
              <a href="#">删除</a>
            </Popconfirm>
          ]}
        >
          {item.name}
        </List.Item>
      )}
    />
  );
}
